Framework7 - Calendar Parameters

Description

Framework7 provides a list of parameters, which are used with calendar and are listed in the following table −

Given below is the list parameters, which are used with calendar.

S.No	Parameter & Description	Type	Default
Common Picker Modal Component Parameters
1	container This is the place where the generated calendar HTML is placed. It is used only for inline pickers.	string or HTMLElement	-
2	input It is the string or HTMLElement with related input element.	string or HTMLElement	-
3	scrollToInput It is the scroll viewport to input on opening calendar.	boolean	true
4	inputReadOnly It is used to set readonly attribute on certain input.	boolean	true
5	convertToPopover It is used to convert calendar modal to popover on big screen.	boolean	true
6	onlyOnPopover If it is enabled, the calendar is opened in popover always.	boolean	false
7	cssClass If it is enabled, the calendar is opened in popover always.	string	-
8	closeByOutsideClick If this is enabled, the picker will be closed when you click outside of picker.	boolean	true
9	toolbar It enables calendar modal toolbar.	boolean	true
10	toolbarCloseText It is the text for close button of toolbar.	string	Done
11	toolbarTemplate It is the toolbar HTML template. It is HTML string by default, with below template − <div class = "toolbar"> <div class = "toolbar-inner"> {{monthPicker}} {{yearPicker}} </div> </div>	string	-
Specific Calendar Parameters
1	value It is the array with initial selected dates.	array	-
2	disabled It is the additional disabled dates.	Date Range	-
3	events It is the dates with events and will be marked with dot on calendar day.	Date Range	-
4	rangesClasses It is used to add custom CSS class for additional styling.	array	-
5	formatValue It is the function to format input value and returns new/formatted string value. The values is array consisting of item representing selected date.	function (p, values)	-
6	monthNames It is the array with full months.	array	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']
7	monthNamesShort It is the array with short form for month names.	array	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
8	dayNames It is the array with week days.	array	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
9	dayNamesShort It is the array with short form for week day names.	array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
10	updateValuesOnTouchmove It updates picker and input values when touch move.	boolean	true
11	firstDay It is the first day of the week. By default, it is 1 - monday.	number	1
12	weekendDays It is the an array with index number of weekend days. By default, it is saturday and sunday.	array	[0, 6]
13	dateFormat It is the default date format and below are the available expressions − 'yyyy' − It is the 4 digits year. 'yy' − It is the 2 digits year. 'mm' − It is the 2 digits month number i.e. from 01 to 12. 'm' − It is the month number from 1 to 12. 'MM' − It is the full month name. 'M' − It is the short form of month name. 'dd' − It is the 2 digit day number i.e. from 01 to 31. 'd' − It is the day number from 1to 31. 'DD' − It is the full week day name. 'D' − It is the short form for week day name.	string	'yyyy-mm-dd'
14	multiple It allows you to select multiple dates/values.	boolean	false
15	rangePicker Enable this to enable the range picker.	boolean	false
16	direction It is the month layout direction which can be horizontal or vertical.	string	horizontal
17	minDate It is the minimum allowed date.	Date	null
18	maxDate It is the maximum allowed date.	Date	null
19	touchmove If this is enabled then calendar months slides follow fingers during touch move.	boolean	true
20	animate It enables transition between months.	boolean	true
21	closeOnSelect If it is enabled then, calendar will be closed when user pick a date.	boolean	false
22	weekHeader It represents the week header with short form of week days.	boolean	true
23	monthPicker If enabled then, display the month picker in toolbar.	boolean	true
24	monthPickerTemplate It is the month picker HTML template. By default it is as follows − <div class = "picker-calendar-month-picker"> <a href = "#" class = "link icon-only picker-calendar-prev-month"> <i class = "icon icon-prev"></i> </a> <span class = "current-month-value"></span> <a href = "#" class = "link icon-only picker-calendar-next-month"> <i class = "icon icon-next"></i> </a> </div>	string	-
25	yearPicker If it is enabled then, displays year picker in toolbar.	boolean	true
26	yearPickerTemplate It is the year picker HTML template. By default, it is as follows − <div class = "picker-calendar-year-picker"> <a href = "#" class = "link icon-only picker-calendar-prev-year"> <i class = "icon icon-prev"></i> </a> <span class = "current-year-value"></span> <a href = "#" class = "link icon-only picker-calendar-next-year"> <i class = "icon icon-next"></i> </a> </div>	string	-
Callbacks
1	onChange It is the callback function which will get run when picker value changes. It accepts values and displayValues arrays as parameters where each item represents value/display value of related column.	function (p, values, displayValues)	-
2	onMonthAdd It is the callback functions which will get run when newly generated month HTML element will be added to calendar.	function (p, monthContainer)	-
3	onDayClick This callback function will be executed if user clicks any date.	function (p, dayContainer, year, month, day)	-
4	onMonthYearChangeStart This callback function will be executed during the beginning of transition to another month/year.	function (p, year, month)	-
5	onMonthYearChangeEnd This callback function will be executed in the end of transition to another month/year.	function (p, year, month)	-
6	onOpen This callback function will be executed when picker is opened.	function (p)	-
7	onClose This callback function will be executed when picker is closed.	function (p)	-

Date Range

Calendar parameters such as disabled, events and rangesClasses accept the so called Date Range. It is easy to specify and capture all the possible combinations of the dates. The following code shows how to use array with dates −

var myCalendar = myApp.calendar ({
   ...
   //Disabled 1st December 2016 and 10th December 2016:
   disabled: [new Date(2016, 12 , 1), new Date(2016, 12, 10)],
   ...
});

You can use the custom function where you need to return true or false as shown in the following code −

var myCalendar = myApp.calendar ({
   ...
   //Disabled all dates in December 2016
   disabled: function (date) {
      if (date.getFullYear() === 2016 && date.getMonth() === 12) {
         return true;
      } else {
         return false;
      }
   },
   ...
});

You can also use any of the following listed ways −

Object with from and to properties.
Just from or to properties.
Array with mixed dates and objects.

var myCalendar = myApp.calendar ({
   ...
   //Disable all dates between 1st December 2016 and 10th December 2016
   disabled: {
      from: new Date(2016, 12, 1),
      to: new Date(2016, 12, 10)
   },
   ...
}); 

Or

var myCalendar = myApp.calendar ({
   ...
   //Disable everyting since December 2015
   disabled: {
      from: new Date(2016, 12, 1)
   },
   ...
}); 

Or

var myCalendar = myApp.calendar ({
   ...
   events: [
      new Date(2016, 12, 1),
      new Date(2016, 12, 10),
      {
         from: new Date(2016, 12, 15),
         to: new Date(2016, 12, 20)
      },
      {
         from: new Date(2016, 12, 25),
         to: new Date(2016, 12, 30)
      }
   ],
   ...
});

rangesClasses

It takes array of objects with Date Range and class names as shown in the following code −

var myCalendar = myApp.calendar ({
   ...
   //Add classes for november and december
   rangesClasses: [
      //Add day-november class for all november dates
      {
         // string CSS class name for this range in cssClass property
         cssClass: 'day-november ', //string CSS class
         
         // Date Range in range property
         range: function (date) {
            return date.getMonth() === 11
         }
      },
      
      //Add day-holiday class for 1-10th December 2016
      {
         cssClass: 'day-holiday',
         range: {
            from: new Date(2016, 12, 1),
            to: new Date(2016, 12, 10)
         }
      }
   ],
   ...
});

framework7_calendar.htm