- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Access To Calendar's Instance
Description
It is possible to access the calendar instance from its HTML container when you initialize the calendar as inline as shown below −
var myCalendar = $$('.calenadr-inline')[0].f7Calendar;
Example
The following example demonstrates the use of calendar in 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>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as calendar_access_instance.html file in your server root folder.
Open this HTML file as http://localhost/calendar_access_instance.html and the output is displayed as shown below.
Here, when you initialize the calendar, you can access the calendar instance from its HTML container.
framework7_calendar.htm
Advertisements