Framework7 - Calendar Parameters


Advertisements

Description

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

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
Advertisements