Framework7 - 访问日历实例

上一页
下一页

描述

当您像下面所示将日历初始化为内联时，可以从其 HTML 容器访问日历实例。

var myCalendar = $$('.calenadr-inline')[0].f7Calendar;

示例

以下示例演示了在 Framework7 中使用日历。

<!DOCTYPE html>
<html class = "with-statusbar-overlay">
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Calendar</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "custom.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Calendar</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Default calendar setup</div>
                     
                     <div class = "list-block">
                        <ul>
                           <li>
                              <div class = "item-content">
                                 <div class = "item-inner">
                                    <div class = "item-input">
                                       <input type = "text" placeholder = "Select a date" 
                                          readonly id = "calendar-default" />
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Custom date format calendar</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <div class = "item-content">
                                 <div class = "item-inner">
                                    <div class = "item-input">
                                       <input type = "text" placeholder = "Select a date" 
                                          readonly id = "calendar-date-format" />
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Multiple values calendar</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <div class = "item-content">
                                 <div class = "item-inner">
                                    <div class = "item-input">
                                       <input type = "text" placeholder = "Select multiple dates" 
                                          readonly id = "calendar-multiple" />
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Range picker calendar</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <div class = "item-content">
                                 <div class = "item-inner">
                                    <div class = "item-input">
                                       <input type = "text" placeholder = "Select date range" 
                                          readonly id = "calendar-range" />
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Calendar with events (Additional dot is marked on calendar day from today to weeklater.)</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <div class = "item-content">
                                 <div class = "item-inner">
                                    <div class = "item-input">
                                       <input type = "text" placeholder = "Select date" 
                                          readonly id = "calendar-events" />
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Disabled dates (Today to weeklater)</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <div class = "item-content">
                                 <div class = "item-inner">
                                    <div class = "item-input">
                                       <input type = "text" placeholder = "Select date" 
                                          readonly id = "calendar-disabled" />
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                     <div class = "content-block-title">Inline with custom toolbar</div>
                     <div class = "content-block">
                        <div style = "padding:0; margin-right:-15px; width:auto" class = "content-block-inner">
                           <div id = "calendar-inline-container"></div>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();

         // Default Calendar
         var calendarDefault = myApp.calendar ({
            input: '#calendar-default',
         });
         
         // With custom date format
         var calendarDateFormat = myApp.calendar({
            input: '#calendar-date-format',
            dateFormat: 'DD, dd MM, yyyy'
         });
         
         // With multiple values
         var calendarMultiple = myApp.calendar ({
            input: '#calendar-multiple',
            dateFormat: ' DD dd M yyyy',
            multiple: true
         });
         
         // Range Picker
         var calendarRange = myApp.calendar ({
            input: '#calendar-range',
            dateFormat: 'dd M yyyy',
            rangePicker: true
         });
         
         // With events
         var today = new Date();
         var weekLater = new Date().setDate(today.getDate() + 7);
         var calendarEvents = myApp.calendar ({
            input: '#calendar-events',
            dateFormat: 'M dd yyyy',
            events: {
               from: today,
               to: weekLater
            }
         });
         
         // Disabled
         var today = new Date();
         var weekLater = new Date().setDate(today.getDate() + 7);
         
         var calendarDisabled = myApp.calendar ({
            input: '#calendar-disabled',
            dateFormat: 'M dd yyyy',
            disabled: {
               from: today,
               to: weekLater
            }
         });
         
         // Inline with custom toolbar
         var $$ = Dom7;
         var monthNames = [
            'January', 
            'February', 
            'March', 
            'April', 
            'May', 
            'June', 
            'July', 
            'August' , 
            'September' , 
            'October', 
            'November', 
            'December'
         ];
         
         var calendarInline = myApp.calendar ({
            container: '#calendar-inline-container',
            value: [new Date()],
            weekHeader: false,
            toolbarTemplate:
               '<div class = "toolbar calendar-custom-toolbar">' +
                  '<div class = "toolbar-inner">' +
                     '<div class = "left">' +
                        '<a href = "#" class = "link icon-only"><i class = "icon icon-back"></i></a>' +
                     '</div>' +
                     '<div class = "center"></div>' +
                  
                     '<div class = "right">' +
                        '<a href = "#" class = "link icon-only"><i class = "icon icon-forward"></i></a>' +
                     '</div>' +
                  '</div>' +
               '</div>',
               
            onOpen: function (p) {
               $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
               $$('.calendar-custom-toolbar .left .link').on('click', function () {
                  calendarInline.prevMonth();
               });
                  
               $$('.calendar-custom-toolbar .right .link').on('click', function () {
                  calendarInline.nextMonth();
               });
            },
               
            onMonthYearChangeStart: function (p) {
               $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
            }
         });
      </script>
   </body>

</html>

输出

让我们执行以下步骤来了解上面给出的代码是如何工作的。

  • 将上面给出的 HTML 代码保存为calendar_access_instance.html文件，放在服务器根文件夹中。

  • 以 https://127.0.0.1/calendar_access_instance.html 的方式打开此 HTML 文件，输出将显示如下。

  • 在这里，当您初始化日历时，您可以从其 HTML 容器访问日历实例。

framework7_calendar.htm
打印页面
上一页
下一页
广告