Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Date Picker & Calendar

A date picker and calendar feature can significantly enhance your website’s user experience, offering an intuitive way for users to select dates for bookings, events, or scheduling. Optimizing these features improves usability and boosts search engine rankings.

Key Features of a Date Picker

  • User-Friendly Interface: Simple, clickable options for selecting dates.
  • Customizable Display: Single date, range selection, or multiple date options.
  • Responsive Design: Works seamlessly across all devices.
  • Integration Ready: Easily connects with APIs or backend systems.
  • Highlighting Features: Marks holidays, weekends, or unavailable dates.
  • Interactive View: Monthly or weekly view with hover-over details.
  • Event Creation: Add events, reminders, or tasks directly.
  • Customization Options: Change themes, colors, and formats.

Date Picker

Source Code 

// Basic HTML Structure for Calendar

<div class="TxBxCnAeCr">
    <input id="StartDate0" type="text" class="TxBxCnAe" placeholder="" autocomplete="off" required value="">
    <label class="TxBxCnAeLl">Start Date*</label>
</div>


const additionalInfo = Array.from({ length: 30 }, (_, i) => {
    const date = new Date();
    date.setDate(date.getDate() + i);

    // Format date as DD-MM-YYYY
    const formattedDate = date.toLocaleDateString('en-GB').split('/').join('-');

    // Generate a random price between $50 and $200
    const randomPrice = `$${Math.floor(Math.random() * (200 - 50 + 1) + 50)}`;  

    return { date: formattedDate, info: randomPrice };
});

const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1); // Set tomorrow's date

document.addEventListener('DOMContentLoaded', function () {
    const InitValues0 = {
        RangeInput: { StartDateInput: 'StartDate0' },
        CsNextIcon: "CT-ArrowRightCircleSolid",
        CsPrevIcon: "CT-ArrowLeftCircleSolid",
        Width: { Mobile: "70vw", Tablet: "250px", Desktop: "300px" },
        DefaultSelectedDate: {
            Start: {
                date: today.getDate(),
                month: today.getMonth(), // Months are zero-based
                year: today.getFullYear(),
            }
        },
        ZIndex: 'ZIx10000000000',
        // Additional Info to show prices, task and other info
        AdditionalInfo: additionalInfo,
        CsAdditionalInfo: 'FxCr FtSe10 CrBe', // chagne style of additional info: prices, tasks etc...
    }

    CT.CeCr(InitValues0);
});

Start End Range Calendar

Key Features of a Date Picker

The CeCr method is used to initialize a customizable date range calendar component. It supports multiple configuration options, including default dates, responsive widths, additional info like pricing, and fixed positioning within a scrollable container.

Options Explained

  • RangeInput: Assigns input element IDs for start and end date selection.
  • CsNextIcon: Class name for the custom next-arrow icon.
  • CsPrevIcon: Class name for the custom previous-arrow icon.
  • Width: Responsive width configuration for different screen sizes. 
    width{
    mobile:"90%",
    tablet:"250px",
    desktop:"250px"
}
    Sets width of calendar to be 90% and 250 pixels on tablets and desktops.
  • DefaultSelectedDate: Preselects a start and end date on calendar load. Accepts two values start and end each specifying:
    • Date: Date of Month
    • Month: Month of Year
    • Year: Year
  • AdditionalInfo: Provides extra content (e.g., pricing) for each date.
  • CsAdditionalInfo: Applies styling to the additional info shown under each date.
  • Reset Calendar:Just clear the value of the input field.
  • FixedCalendar: Keeps the calendar fixed and updates its position relative to a scrollable container.
    • Use this when your calendar is inside a scrollable container.
    • Set ScrollDivId to the ID of the scrollable container (e.g., RenderBody).
    • Automatically updates calendar position on scroll for better user experience.
Source Code 

// Basic HTML Structure for Calendar

<div class="PgLtRt2 DyFx FxAnIsCr FxJyCtCr BrRs15 Ht50 TtAnCr">
    <div class="PgTpBm5 DyFx FxDnCn BrRs8  Wh100p CrBdWe94">
        <div class="DyFx Gp5">
            <div class="MnTp7 MnBm7">
                <div class="TtBxFlStDiv">
                    <div class="TtBxFlSt">
                        <div class="TxBxCnAeCr">
                            <input id="StartDate1" type="text" class="TxBxCnAe" placeholder="" autocomplete="off" required>
                            <label class="TxBxCnAeLl">Start Date*</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="MnTp7 MnBm7">
                <div class="TtBxFlStDiv">
                    <div class="TtBxFlSt">
                        <div class="TxBxCnAeCr">
                            <input id="EndDate1" type="text" class="TxBxCnAe" placeholder="" autocomplete="off" required>
                            <label class="TxBxCnAeLl">End Date*</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


const additionalInfo = Array.from({ length: 30 }, (_, i) => {
    const date = new Date();
    date.setDate(date.getDate() + i);

    // Format date as DD-MM-YYYY
    const formattedDate = date.toLocaleDateString('en-GB').split('/').join('-');

    // Generate a random price between $50 and $200
    const randomPrice = `$${Math.floor(Math.random() * (200 - 50 + 1) + 50)}`;  

    return { date: formattedDate, info: randomPrice };
});

const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1); // Set tomorrow's date

document.addEventListener('DOMContentLoaded', function () {
    const InitValues1 = {
        RangeInput: { StartDateInput: 'StartDate1', EndDateInput: 'EndDate1' },
        CsNextIcon: "CT-ArrowRightCircleSolid",
        CsPrevIcon: "CT-ArrowLeftCircleSolid",
        Width: { Mobile: "70vw", Tablet: "250px", Desktop: "300px" },
        DefaultSelectedDate: {
            Start: {
                date: today.getDate(),
                month: today.getMonth(), // Months are zero-based
                year: today.getFullYear(),
            },
            End: {
                date: tomorrow.getDate(),
                month: tomorrow.getMonth(),
                year: tomorrow.getFullYear(),
            },
        },
        DisableCount: { Before: 2, After: 200 },
        // Additional Info to show prices, task and other info
        AdditionalInfo: additionalInfo,
        CsAdditionalInfo: 'FxCr FtSe10 CrBe', // chagne style of additional info: prices, tasks etc...
    }

    CT.CeCr(InitValues1);
});

Range Calendar

Key Features of a Date Picker

The CeCr method is used to create a custom, responsive, and interactive calendar widget that supports Date range selection, Responsive styling (Mobile, Tablet, Desktop), Default date selection, Additional information (e.g., pricing, tasks) under each date, Fixed positioning inside scrollable containers

Options Explained

  • RangeInput: Assigns input element IDs for start and end date selection.
  • CsNextIcon: Class name for the custom next-arrow icon.
  • CsPrevIcon: Class name for the custom previous-arrow icon.
  • Width: Responsive width configuration for different screen sizes. 
    width{
    mobile:"90%",
    tablet:"250px",
    desktop:"250px"
}
    Sets width of calendar to be 90% and 250 pixels on tablets and desktops.
  • DefaultSelectedDate: Preselects a start and end date on calendar load. Accepts two values start and end each specifying:
    • Date: Date of Month
    • Month: Month of Year
    • Year: Year
  • AdditionalInfo: Provides extra content (e.g., pricing) for each date.
  • CsAdditionalInfo: Applies styling to the additional info shown under each date.
  • FixedCalendar: Keeps the calendar fixed and updates its position relative to a scrollable container.
    • Use this when your calendar is inside a scrollable container.
    • Set ScrollDivId to the ID of the scrollable container (e.g., RenderBody).
    • Automatically updates calendar position on scroll for better user experience.
  • DisableDate: Prevents selection of dates before or after the given boundaries(optional).
  • DisableCount : Limits selectable dates by count.
  • DisableAfterDays :Disables all dates after the given number of days from the current date.
  • RangeSelectClass : Custom class applied to range-selected days.
  • RangeTheme : Defines the visual theme used for range selection. Example: 'RangeTheme1'.
  • RangeSameDaySelect : Allows users to select the same date for both start and end.
  • ShowMonths : Number of calendar months to be displayed side-by-side.
  • PositionCalender : Manually positions the calendar relative to input fields.
  • DateFormat :Disables all dates after the given number of days from the current date.
  • CsCalenderDiv : Container div for the calendar.
  • CsCalenderRowDayDiv : Styles for normal date rows.
  • CsCalenderRowDayDisableDiv : Styles for disabled date rows.
Source Code 

// Calender
<div class="DyFx FxAnIsCr FxJyCtCr">

    // Range Calendar
    <div class="PgLtRt2 DyFx FxAnIsCr FxJyCtCr BrRs15 Ht50 TtAnCr">
        <div class="PgTpBm5 DyFx FxDnCn BrRs8 Wh100p CrBdWe94">
            <div class="DyFx Gp5">
                <div class="MnTp7 MnBm7">
                    <div class="TtBxFlStDiv">
                        <div class="TtBxFlSt">
                            <div class="TxBxCnAeCr">
                                <input id="StartDate" type="text" class="TxBxCnAe" placeholder="" autocomplete="off" required>
                                <label class="TxBxCnAeLl">Start Date*</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="MnTp7 MnBm7">
                    <div class="TtBxFlStDiv">
                        <div class="TtBxFlSt">
                            <div class="TxBxCnAeCr">
                                <input id="EndDate" type="text" class="TxBxCnAe" placeholder="" autocomplete="off" required>
                                <label class="TxBxCnAeLl">End Date*</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


document.addEventListener('DOMContentLoaded', function () {

    const InitValues2 = {
        StartDateInput: 'StartDate',
        RangeInput: { StartDateInput: 'StartDate', EndDateInput: 'EndDate' },
        CalenderType: 'Date',
        //DisableDate      : { Before: '2017/12/1', After: '2026/1/15' },
        DisableCount: { Before: 1, After: 100 },
        RangeSelectClass: '',
        RangeTheme: 'RangeTheme1',
        RangeSameDaySelect: true,// Used For Selecting Same Date
        ShowMonths: 2,
        PositionCalender : { StartDateId: 'StartDate', EndDateId: 'StartDate' },
        // AdditionalInfo: additionalInfo,
        SelectedStartDate: '2025-1-8',//To Show 3 Days Selection Start
        SelectedEndDate: '2025-1-10',
        // DisableAfterDays: 10,
        Width: { Mobile: "55vw", Tablet: "250px", Desktop: "250px" },
        DateFormat: 'D-MMM-YY',
        DefaultSelectedDate: {
            Start: {
                date: today.getDate(),
                month: today.getMonth(), // Months are zero-based
                year: today.getFullYear(),
            },
            End: {
                date: tomorrow.getDate(),
                month: tomorrow.getMonth(),  // Months are zero-based
                year: tomorrow.getFullYear(),
            },
        },
        //Classes For Main Calender Div
        CsCalenderDiv: 'DyFx TtAnCr FxGw1 BxSwCrGy BrRs5 Pg3 FxDnCn',
        CsCalenderRowDayDiv: 'Wh100pD7 DyTeCl PgTpBm5 Br1 CrBrGy90Lt HrCrBdTe  CrurPr FtWt600',
        CsCalenderRowDayDisableDiv: 'Wh100pD7 DyTeCl PgTpBm5 Br1 CrBrGy90Lt FtWt600 CrGy80Lt',
        CsToday: 'CrBdTe70Lt',
        CsWeekDay: "Wh100pD7 DyTeCl PgTpBm5 Br1 CrBrGy90Lt  CrBdTe80Lt91 FtWt600",
        CsNextIcon: "CT-ArrowRightCircleSolid",
        CsPrevIcon: "CT-ArrowLeftCircleSolid",
        CsSelectedDateStartEnd: ['BxSwItCrTe', 'BrRs3', 'CrBdTe90Lt97'],// Should Be Array because they are added in loop
        CsAdditionalInfo: 'FxCr FtSe10 CrBe', // chagne style of additional info: prices, tasks etc...
    }

    CT.CeCr(InitValues2);

});

Attribute Based Single Calendar

Source Code 

<div class="DyFx FxAnIsCr FxJyCtCr">

    <div class="PgLtRt2 DyFx FxAnIsCr FxJyCtCr BrRs15 Ht50 TtAnCr">
        <div class="PgTpBm5 DyFx FxDnCn BrRs8  Wh100p CrBdWe94">
            <div class="DyFx Gp5 AttributeBasedCalendar"
                    ot='{
                    "RangeInput" : { "StartDateInput" : "AttributeStartDate0" },
                    "CsNextIcon" : "CT-ArrowRightCircleSolid" ,
                    "CsPrevIcon" : "CT-ArrowLeftCircleSolid" ,
                    "Width" : { "Mobile" : "70vw" , "Tablet" : "250px" , "Desktop" : "300px" }
                    }'>
                <div class="MnTp7 MnBm7">
                    <div class="TtBxFlStDiv">
                        <div class="TtBxFlSt">
                            <div class="TxBxCnAeCr">
                                <input type="text"
                                        class="TxBxCnAe StartInputCalendar"
                                        placeholder=""
                                        autocomplete="off"
                                        required
                                        value="">
                                <label class="TxBxCnAeLl">Start Date*</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Attribute Based Range Calendar

This calendar component supports attribute-based configuration using the ot attribute (short for options) directly within the HTML. This allows developers to configure and render a calendar without writing JavaScript for setup, making it easier to use in static HTML pages or dynamically injected UI.

The component reads the value of the ot attribute, parses it as a JSON object, and uses it to initialize the calendar with your defined settings.

Options Explained

  • RangeInput: Assigns input element IDs for start and end date selection.
  • CsNextIcon: Class name for the custom next-arrow icon.
  • CsPrevIcon: Class name for the custom previous-arrow icon.
  • Width: Responsive width configuration for different screen sizes. 
    width{
    mobile:"90%",
    tablet:"250px",
    desktop:"250px"
}
    Sets width of calendar to be 90% and 250 pixels on tablets and desktops.
  • DefaultSelectedDate: Preselects a start and end date on calendar load. Accepts two values start and end each specifying:
    • Date: Date of Month
    • Month: Month of Year
    • Year: Year
  • AdditionalInfo: Provides extra content (e.g., pricing) for each date.
  • CsAdditionalInfo: Applies styling to the additional info shown under each date.
  • FixedCalendar: Keeps the calendar fixed and updates its position relative to a scrollable container.
    • Use this when your calendar is inside a scrollable container.
    • Set ScrollDivId to the ID of the scrollable container (e.g., RenderBody).
    • Automatically updates calendar position on scroll for better user experience.

Note

  • Add class AttributeBasedCalendar in the div that contains the object Ot.
  • Add class StartInputCalendar in the input textbox that contains start Date.
  • Add class EndInputCalendar in the input textbox that contains End Date.
Source Code 

<div class="DyFx FxAnIsCr FxJyCtCr">

    <div class="PgLtRt2 DyFx FxAnIsCr FxJyCtCr BrRs15 Ht50 TtAnCr">
        <div class="PgTpBm5 DyFx FxDnCn BrRs8  Wh100p CrBdWe94">
            <div class="DyFx Gp5 AttributeBasedCalendar"
                    ot='{
                    "RangeInput" : { "StartDateInput" : "AttributeStartDate1" , "EndDateInput" : "AttributeEndDate1" },
                    "CsNextIcon" : "CT-ArrowRightCircleSolid" ,
                    "CsPrevIcon" : "CT-ArrowLeftCircleSolid" ,
                    "Width" : { "Mobile" : "70vw" , "Tablet" : "250px" , "Desktop" : "300px" },
                    "FixedCalendar" : { "ScrollDivId" : "RenderBody" }
                    }'>
                <div class="MnTp7 MnBm7">
                    <div class="TtBxFlStDiv">
                        <div class="TtBxFlSt">
                            <div class="TxBxCnAeCr">
                                <input type="text"
                                        class="TxBxCnAe StartInputCalendar"
                                        placeholder=""
                                        autocomplete="off"
                                        required
                                        value="">
                                <label class="TxBxCnAeLl">Start Date*</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="MnTp7 MnBm7">
                    <div class="TtBxFlStDiv">
                        <div class="TtBxFlSt">
                            <div class="TxBxCnAeCr">
                                <input type="text"
                                        class="TxBxCnAe EndInputCalendar"
                                        placeholder=""
                                        autocomplete="off"
                                        required>
                                <label class="TxBxCnAeLl">End Date*</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
Initialize Attribute Based Calendar Manually
Source Code 

// In some cases you may want to use the calendar and call init function manually.
document.addEventListener('DOMContentLoaded', function () {
    CT.ItCr(); // init calendar
});
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...