Vanilla Calendar

Date and Time picker for your Toddle project. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies. Build with vanilla-calendar.pro.

github [#142] Created with Sketch.

Demos Dark Theme

Component

  • calendar

    Date and Time picker.

    dates: [], time: 03:15 PM

    Attributes

    type TYPES OF CALENDARS:
    1. The calendar type 'default' displays a single month, allows you to select days, navigate between months using arrows, and choose a month and year from the respective headers. This is the standard calendar display mode.
    2. The calendar type 'multiple' displays multiple months, allowing you to select days in each of them.
    3. The calendar type 'month' displays a list of months and allows the user to select months and years from the respective headers.
    4. The calendar type 'year' displays a list of years, allowing the user to choose a year from the list and select a month from the respective header.
    theme 'dark' or 'light'.
    today The calendar allows you to specify which day should be considered as today. The date should be in this format: 'YYYY-MM-DD'.
    popups
    You can add pop-ups with information for any day, which will be displayed when hovering over that day. The value is an array of objects where each object needs to have date, modifier, and html keys.

    Date key values accept strings in the following format: 'YYYY-MM-DD'.

    Modifier key values accept a CSS class to style the popup. Few classes are built-in and already styled: 'bg-red', 'bg-green', 'bg-orange', 'bg-pink'.

    Html key values accept strings or HTML for the content of the popups.
    date-min and date-max. The date range in the calendar can be set using the date-min and date-max attributes. These parameters specify the permissible date range in the calendar.

    By default, the minimum date is '1970-01-01', which corresponds to the beginning of UNIX time. The default maximum date is set to '2470-12-31', and it is chosen arbitrarily.

    If you need to set a specific date range, replace the values of the date-min and date-max attributes with the dates you require. Note that the calendar will not process dates outside the specified range.
    jump-months The attribute controls the number of months to jump when clicking on arrows. The default jump is '1'.
    week-starts This attribute sets the start of the week in accordance with the international standard ISO 8601. If set to 'sunday', the week will start on Sunday; otherwise, it starts on Monday.
    localization This attribute sets the language localization of the calendar. You can specify a language label according to BCP 47. For list of languages visit the following link: Link
    month-to-show This attribute specifies the number of displayed months when the calendar type is set to 'multiple'. Default: '2'.


    Advanced Settings Attributes
    settings-range Object as a value. It accepts the following keys: rangeMin, rangeMax, disablePast, disableGaps, disableAllDays, disableWeekday, disabled, enabled.
    settings-selected Object as a value. It accepts the following keys: dates, month, year, holidays, time.
    settings-selection Object as a value. It accepts the following keys: day, month, year, time, controlTime, stepHours, stepMinutes, cancelableDay.
    settings-visibility Object as a value. It accepts the following keys: themeDetect, monthStart, weekNumbers, weekend. today, disabled, daysOutside.

    Events

    clickDay Emitted when user click on a day. Please note that the output is represented as an array because the user can select not only one day but also a range of dates if allowed by the calendar parameters.
    clickMonth
    Emitted when user click on a month in the list of all months, you can handle this event and obtain information about the selected item and its ordinal number.
    It's important to note that months are numbered starting from zero, where January corresponds to the zeroth month, and December is the eleventh.
    clickYear Emitted when user click on a year header in the calendar. The output is year number.
    changeTime To enable time: settings-selection.time, set to True. Then the event is emitted when the user changes the time. The output is the selected time.

    Advanced Settings Details

    Settings Range Object

    rangeMin Sets the minimum date that the user can choose. Dates earlier than the specified date will be disabled and not available for selection. Default Value: '1970-01-01'
    rangeMax
    Sets the maximum date that the user can choose. Dates later than the specified date will be disabled and not available for selection. Default Value: '2470-12-31'
    disablePast Boolean value. Disables all past days. Default Value: false
    disableGaps Boolean value. Disables the selection of days within a range with disabled dates. It only works when settings-selection.day is set to 'multiple-ranged'. Default Value: false
    disableAllDays
    Boolean value. Disables all days and can be useful when using settings-range.enabled. Default Value: false
    disableWeekday
    Allows you to disable specified weekdays. Specify an array with numbers, where each number represents a day of the week. For example, 0 is Sunday. Default Value: []
    disabled
    Array value. Allows you to disable specific dates regardless of the specified range. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null
    enabled
    Array value. Allows you to enable specific dates regardless of the range and disabled dates. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null

    Settings Selected Object

    dates
    Array value. Allows you to specify a list of dates that will be selected when the calendar is initialized. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null
    month Determines the month that will be displayed when the calendar is initialized. Months are numbered from 0 to 11. Default Value: null
    year Determines the year that will be displayed when the calendar is initialized. Default Value: null
    holidays Array value. Allows you to specify dates that will be considered holidays and will receive additional CSS modifiers. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null
    time
    This parameter allows you to set the time that will be displayed when the calendar is initialized. The time is specified in the 'hh:mm aa' format, where 'aa' is the AM/PM marker. If using the 24-hour format, the 'aa' marker is not required.

    Settings Selection Object

    day Determines whether it's allowed to select one or multiple days, or if day selection is completely disabled.
    Options: 'single' | 'multiple' | 'multiple-ranged' | false
    Default Value: 'single'
    month
    Boolean value: Allows you to disable the selection of months, allow switching between months only using arrows, or allow switching between months in any way. Default Value: true
    Options: true | false | 'only-arrows'
    year Boolean value: Allows you to disable the selection of years, allow switching between years only using arrows, or allow switching between years in any way. Default Value: true
    Options: true | false | 'only-arrows'
    time Enables time selection. You can also specify the time format using a boolean value or a number: 24-hour or 12-hour format. Default Value: false
    Options: | false | 24 | 12
    controlTime Determines how time selection is allowed: 'all' (any method) or 'range' (only with the controller). Default Value: 'all'
    stepHours Sets the step for the hour controller. You can choose any number from 1 to 23. Default Value: 1
    stepMinutes Sets the step for the minute controller. You can choose any number from 1 to 59. Default Value: 1
    cancelableDay Boolean value. Allows you to enable/disable cancellation of the selected date by pressing again. Default Value: true

    Settings Visibility Object

    themeDetect To automatically detect and apply the website's theme to the calendar, you can pass a string value as a CSS selector. By default, it tracks the html tag with the data-theme attribute, but you can customize any other attribute and tag, such as class, if the class name is used to set the theme. If set to false, the theme will be determined by the user's system or the theme attribute. Default Value: 'html[data-theme]'
    monthShort Boolean value: Allows you to use abbreviated month names when selecting a month. Default Value: true
    weekNumbers Boolean value: Decide whether to display week numbers in the calendar. Default Value: false
    weekend Boolean value. Highlight weekends in the calendar. Default Value: false
    today Boolean value. Highlight the current day in the calendar. Default Value: true.
    disabled Boolean value. Determine whether all days, including disabled days, will be displayed. Default Value: false
    daysOutside Boolean value. Decide whether to display days from the previous and next months. Default Value: true

    Short Video Demo

    Popup Demo