Month View

The month-view component serves as the foundation for a monthly calendar display. It manages scrolling/swiping functionality and calendar events through a modular architecture. The component consists of a prefilled month component and an optional month-view-popup for enhanced interactions. Its structure allows for extensive customization through various slots, including week numbers, weekdays, day headers, events and overflow handling. The component supports horizontal and vertical scrolling, customizable event handling and responsive design with configurable dimensions.

Flexible modular design

Highly customizable

Smooth month scrolling and swiping

Optional popup functionality

Example

Architecture

month-view
Slot: month
month
Slot: week-numbers This is optional.
month-week-numbers
Slot: weekdays This is optional.
month-weekdays
Slot: day-header
month-day-header
Slot: event
month-event
Slot: overflow
month-overflow
Slot: popup This is optional.
month-view-popup
Slot: default

Reference

  • Month View

    This component serves as the root container for the month calendar view, offering a flexible structure with optional week numbers and weekdays. It includes slots for day headers, events, and an overflow mechanism, along with an optional popup for additional interactions.

    • Attributes

      • css-prefix
        string
        /
        default: sparkcal

        Prefix for all CSS variables

      • enable-event-click
        boolean
        /
        default: true

        Determines if a click on an event is recognized (fires On event click). If false, the On day click event will fire instead.

      • events
        array
        /
        default: []

        The events to be displayed in the calendar.

      • height
        string
        /
        default: 100%

        Height of the component.

      • initial-render-delay-ms
        number
        /
        default: 250

        Time in milliseconds the view is unresponsive on initial render (improves render speed).

      • month
        string
        /
        default: current month

        The month to be displayed. In the format "YYYY-MM"

      • scroll-direction
        enum
        /
        default: horizontal

        Direction in which the month can be scrolled and swiped.

      • scroll-duration
        string
        /
        default: 250ms

        The duration of the scroll animation.

      • scroll-easing
        string
        /
        default: ease

        The easing function of the scroll animation.

      • start-of-week
        enum
        /
        default: monday

        The start day of the week.

      • swipe-speed-threshold
        number
        /
        default: 0.5

        Speed in pixels per millisecond required for a swipe gesture to change the month, regardless of the swipe distance.

      • swipe-threshold
        number
        /
        default: 0.2

        Threshold in percent of the screen that needs to be swiped to change the month

      • width
        string
        /
        default: 100%

        Width of the component

    • Events

      • On day click

        Fired when a user clicks on a day or day header

      • On event click

        Fired when a user clicks on a calendar event

      • On month change

        Fired when the month is changed through swipe or scroll

    • Style Variables

      • --'css-prefix'-month-view-height

        Height of the month view

      • --'css-prefix'-month-view-width

        Width of the month view

  • Month

    The month component displays the actual month within the month-view. It is not standalone and must be a child of the month-view in the month slot.

    • Attributes

      • bg-color
        string
        /
        default: #171717

        Color of the month’s background

      • line-color
        string
        /
        default: #262626

        Color of the separator lines

      • line-width-horizontal
        string
        /
        default: 1px

        Width of the horizontal lines

      • line-width-vertical
        string
        /
        default: 1px

        Width of the vertical lines

    • Style Variables

      • --'css-prefix'-month-bg-color

        Color of the month's background

      • --'css-prefix'-month-line-color

        Color of the separator lines

      • --'css-prefix'-month-line-width-horizontal

        Width of the horizontal lines

      • --'css-prefix'-month-line-width-vertical

        Width of the vertical lines

  • Month Week Numbers

    The month-week-numbers component is used to display week numbers at the top of the month component. It is not standalone and must be a child of the month component in the week-numbers slot.

    • Attributes

      • bg-color
        string
        /
        default: #262626

        Background color of the container

      • color
        string
        /
        default: #A3A3A3

        The text color of the week numbers

      • font-family
        string
        /
        default: inherit

        Font family of the week numbers

      • font-size
        string
        /
        default: 1rem

        Font size of the week numbers

      • font-weight
        string
        /
        default: 500

        Font weight of the week numbers

      • width
        string
        /
        default: 2rem

        Width of the week number container

    • Style Variables

      • --'css-prefix'-month-week-numbers-bg-color

        Background color of the container

      • --'css-prefix'-month-week-numbers-color

        Text color of the week numbers

      • --'css-prefix'-month-week-numbers-font-family

        Font family of the week numbers

      • --'css-prefix'-month-week-numbers-font-size

        Font size of the week numbers

      • --'css-prefix'-month-week-numbers-font-weight

        Font weight of the week numbers

      • --'css-prefix'-month-week-numbers-spacing

        Spacing between week numbers. Defaults to horizontal line width of the month component

      • --'css-prefix'-month-week-numbers-width

        Width of the week numbers container

  • Month Weekdays

    The month-weekdays component is used as the header of the month. It is not standalone and must be placed in the weekdays slot of the month component.

    • Attributes

      • bg-color
        string
        /
        default: #262626

        Background color of the outer container

      • bg-color-container
        string
        /
        default: #262626

        Background color of the weekdays container

      • color
        string
        /
        default: #A3A3A3

        The text color of the weekday

      • color-weekend
        string
        /
        default: #737373

        The text color of the weekday on weekends

      • font-family
        string
        /
        default: inherit

        Font family of the weekdays

      • font-size
        string
        /
        default: 1rem

        Font size of the weekdays

      • font-weight
        string
        /
        default: 500

        Font weight of the weekdays

      • height
        string
        /
        default: 2rem

        Height of the weekday

      • number-of-characters
        number
        /
        default: 2

        Number of characters of weekday

      • text-transform
        string
        /
        default: uppercase

        Text transformation style for the weekday

    • Style Variables

      • --'css-prefix'-month-weekdays-bg-color

        Background color of the outer container

      • --'css-prefix'-month-weekdays-bg-color-container

        Background color of the weekdays container

      • --'css-prefix'-month-weekdays-color

        The text color of the weekday

      • --'css-prefix'-month-weekdays-color-weekend

        The text color of the weekday on weekends

      • --'css-prefix'-month-weekdays-font-family

        Font family of the weekdays

      • --'css-prefix'-month-weekdays-font-size

        Font size of the weekdays

      • --'css-prefix'-month-weekdays-font-weight

        Font weight of the weekdays

      • --'css-prefix'-month-weekdays-height

        Height of the container

      • --'css-prefix'-month-weekdays-padding-left

        Padding left of the weekdays container. Defaults to the width of the wee-numbers component

      • --'css-prefix'-month-weekdays-spacing

        Spacing between the weekday labels. Defaults to the line-width-vertical of the month component

      • --'css-prefix'-month-weekdays-text-transform

        The text-transform of the weekday label

  • Month Day Header

    The month-day-header component is the header of each day in a month. It cannot be used standalone but must be placed in a month component in the day-header slot.

    • Attributes

      • bg-color
        string
        /
        default: #171717

        Background color of the container

      • bg-color-today
        string
        /
        default: #1D4ED8

        Background color of the today indicator

      • border-radius-today
        string
        /
        default: 0.875rem

        Border radius of the today indicator

      • color
        string
        /
        default: #FFFFFF

        The text color of the day number

      • color-next-month
        string
        /
        default: #737373

        The text color of the day number when the day is in the next month

      • color-past
        string
        /
        default: #737373

        The text color of the day number when the day is in the past

      • color-previous-month
        string
        /
        default: #737373

        The text color of the day number when the day is in the previous month

      • color-today
        string
        /
        default: #FFFFFF

        Text color of the today indicator

      • font-family
        string
        /
        default: inherit

        Font family of the day number

      • font-size
        string
        /
        default: 1rem

        Font size of the week numbers

      • font-weight
        string
        /
        default: 500

        Font weight of the day number

      • height
        string
        /
        default: 2rem

        Height of the container

      • size-today
        string
        /
        default: 1.75rem

        Size of the today indicator

    • Style Variables

      • --'css-prefix'-month-day-header-bg-color

        Background color of the container

      • --'css-prefix'-month-day-header-bg-color-today

        Background color of the today indicator

      • --'css-prefix'-month-day-header-border-radius-today

        Radius of the today indicator

      • --'css-prefix'-month-day-header-color

        The text color of the day number

      • --'css-prefix'-month-day-header-color-next-month

        The text color of the day number when the day is in the next month

      • --'css-prefix'-month-day-header-color-past

        The text color of the day number when the day is in the past

      • --'css-prefix'-month-day-header-color-previous-month

        The text color of the day number when the day is in the previous month

      • --'css-prefix'-month-day-header-color-today

        Text color of the today indicator

      • --'css-prefix'-month-day-header-font-family

        Font family of the day number

      • --'css-prefix'-month-day-header-font-size

        Font size of the day number

      • --'css-prefix'-month-day-header-font-weight

        Font weight of the day number

      • --'css-prefix'-month-day-header-height

        Height of the container

      • --'css-prefix'-month-day-header-size-today

        Size of the today indicator

  • Month Event

    The month-event component displays a calendar event. It is not standalone and must be used in the event slot of the month component.

    • Attributes

      • bg-color
        string
        /
        default: #1D4ED8

        Background color of the event

      • bg-color-hover
        string
        /
        default: #1D4ED8

        Default background hover color of the event

      • border-radius
        string
        /
        default: 0.25rem

        Border radius of the event

      • color
        string
        /
        default: #FFFFFF

        The text color of the event

      • color-alt
        string
        /
        default: #FFFFFF

        The default text color of non all-day events when show-time is set to true

      • color-alt-hover
        string
        /
        default: #FFFFFF

        The default text hover color of non all-day events when show-time is set to true

      • color-hover
        string
        /
        default: #FFFFFF

        The default text hover color of the event

      • font-family
        string
        /
        default: inherit

        Font family of the event title

      • font-size
        string
        /
        default: 0.875rem

        Font size of the event title

      • font-weight
        string
        /
        default: 400

        Font weight of the event title

      • height
        string
        /
        default: 1.5rem

        Height of the event

      • hour-format
        enum
        /
        default: 24h

        The hour format of the displayed time

      • padding
        string
        /
        default: 0.25rem

        Inner padding

      • past-opacity
        number
        /
        default: 0.5

        The opacity of the event if it is in the past

      • show-time
        boolean
        /
        default: true

        If true, it will show the time for non all-day events

      • spacing
        string
        /
        default: 0.25rem

        Spacing between events

      • transition-duration
        string
        /
        default: 250ms

        The transition duration for hover transitions

      • transition-easing
        string
        /
        default: ease

        The transition easing function for hover transitions

    • Style Variables

      • --'css-prefix'-month-event-bg-color

        Default background color of the event

      • --'css-prefix'-month-event-bg-color-hover

        Default background hover color of the event

      • --'css-prefix'-month-event-border-radius

        Border radius of the event

      • --'css-prefix'-month-event-color

        The default text color of the event

      • --'css-prefix'-month-event-color-alt

        The default text color of non all-day events when show-time is set to true

      • --'css-prefix'-month-event-color-alt-hover

        The default text hover color of non all-day events when show-time is set to true

      • --'css-prefix'-month-event-color-hover

        The default text hover color of the event

      • --'css-prefix'-month-event-font-family

        Font family of the event title

      • --'css-prefix'-month-event-font-size

        Font size of the event title

      • --'css-prefix'-month-event-font-weight

        Font weight of the event title

      • --'css-prefix'-month-event-height

        Height of the event

      • --'css-prefix'-month-event-padding

        Inner padding

      • --'css-prefix'-month-event-past-opacity

        The opacity of the event if it is in the past

      • --'css-prefix'-month-event-spacing

        Spacing between events

      • --'css-prefix'-month-event-transition-duration

        The transition duration for hover transitions

      • --'css-prefix'-month-event-transition-easing

        The transition easing function for hover transitions

  • Month Overflow

    The month-overflow component is displayed when events exceed the available visual space. It is not standalone and must be placed in the overflow slot of the month component.

    • Attributes

      • bg-color
        string
        /
        default: #404040

        Background color of the overflow

      • bg-color-hover
        string
        /
        default: #525252

        Default background hover color of the overflow

      • border-radius
        string
        /
        default: 0.25rem

        Border radius of the overflow

      • color
        string
        /
        default: #FFFFFF

        The text color of the overflow

      • color-hover
        string
        /
        default: #FFFFFF

        The default text hover color of the overflow

      • font-size
        string
        /
        default: 0.875rem

        Font size of the overflow title

      • past-opacity
        number
        /
        default: 0.5

        The opacity when overflow is in the past

      • spacing
        string
        /
        default: 0.25rem

        Spacing between overflows and events

      • transition-duration
        string
        /
        default: 250ms

        Duration for CSS transitions for the hover effect

      • transition-easing
        string
        /
        default: ease

        Easing function for CSS transitions for the hover effect

    • Style Variables

      • --'css-prefix'-overflow-bg-color

        Default background color of the overflow

      • --'css-prefix'-overflow-bg-color-hover

        Default background hover color of the overflow

      • --'css-prefix'-overflow-border-radius

        Border radius of the overflow

      • --'css-prefix'-overflow-color

        The default text color of the overflow

      • --'css-prefix'-overflow-color-hover

        The default text hover color of the overflow

      • --'css-prefix'-overflow-font-size

        Font size of the overflow title

      • --'css-prefix'-overflow-past-opacity

        Opacity when overflow is in the past

      • --'css-prefix'-overflow-spacing

        Spacing between overflows and events

      • --'css-prefix'-overflow-transition-duration

        Duration for CSS transitions for the hover effect

      • --'css-prefix'-overflow-transition-easing

        Easing function for CSS transitions for the hover effect

  • Month View Popup

    The month-view-popup component is a popup for the month-view. It must be placed in the popup slot of the month-view.

    • Attributes

      • distance-event
        string
        /
        default: 0.25rem

        Distance from the event the popup is attached to

      • max-width
        string
        /
        default: 80%

        Maximum width of the popup

      • offset
        string
        /
        default: 0px

        Vertical offset of the popup

      • spacing-edge
        string
        /
        default: 1rem

        Spacing from the edge of the month-view

      • transition-duration
        string
        /
        default: 250ms

        Duration of the fade-in transition

      • transition-easing
        string
        /
        default: ease

        Easing function of the fade-in transition

      • transition-offset
        string
        /
        default: 0.5rem

        Horizontal offset for the fade-in transition

    • Style Variables

      • --'css-prefix'-month-view-popup-max-width

        Maximum width of the popup

      • --'css-prefix'-month-view-popup-spacing-edge

        Spacing from the edge of the month-view

Context

  • monthViewContext

    Contains the current state of the month view and handlers for events

  • monthViewPopupContext

    Contains the current event that is opened in the popup

made for toddle