# Options

Here are the options which can be passed on to each calendar type.

# Calendars

# element

Sets where to insert the calendar to. Can be either a CSS selector string or an HTMLElement object.

Type: string | HTMLElement

# selectedDate

Sets the starting date for the calendar. Can be set to a date string, Date object, or null. If null, todays date will be selected by default. If a string is passed, the format option should also be passed in order for the calendar to know the format of the selectedDate that you are passing.

If the selectedDate string option is passed, you should also pass the format option to the calendar know what type of format you are inputting the date in.

Type: string | Date
Default: Todays date
Example:

// Using date as string
new datedreamer.calendar({
    element: "#my-calendar",
    selectedDate: "01/15/2023",
    format: "MM/DD/YYYY"
})

// Using Date object
const todaysDate = new Date();
new datedreamer.calendar({
    element: "#my-calendar",
    selectedDate: todaysDate,
    format: "MM/DD/YYYY"
})

# format

Use this to specify the input AND output format of the date. Please see the available formats from DayJS (opens new window).

Type: string
Example: DD/MM/YYYY

# iconNext

Sets the next arrow icon. You can pass it either text or an svg.

Type: string
Example: <svg>...</svg>

# iconPrev

Sets the previous arrow icon. You can pass it either text or an svg.

Type: string
Example: <svg>...</svg>

# inputLabel

Sets the label of the date input element.

Type: string
Default: Set a date
Example: Reservation Date

# inputPlaceholder

Sets the placeholder of the date input element.

Type: string
Default: Enter a date
Example: Select a Reservation Date

# hideInputs

Hides the input and today button from the UI. Type: boolean
Default: false

# darkMode

Turns on dark mode for calendars. Type: boolean
Default: false

# onChange

Use this to provide a callback function that the calendar will call when the date is changed. The callback function will receive a CustomEvent argument that will include the chosen date inside the detail property.

Type: function
Default: undefined
Example:

new datedreamer.calendar({
    ...,
    onChange: (e) => {
        // Get Date object from event
        console.log(e.detail);
    }
})

# onRender

Use this to provide a callback function that the calendar will call when the calendar is rendered. The callback function will receive a CustomEvent argument that will include a calendar property inside of the event detail property.

Type: function
Default: undefined
Example:

new datedreamer.calendar({
    ...,
    onRender: (e) => {
        // Calendar has rendered
        console.log(e.detail.calendar);
    }
})

# theme

Sets the style template to use.

Type: unstyled|lite-purple
Default: unstyled
Example:

unstyled:
lite-purple:

# styles

Use this property to pass css styles that will be passed into the components style tag.

new datedreamer.calendar({
    ...,
    styles: `
        button {
            color: blue
        }
    `
})

← Getting Started