Week View

The week-view component functions as the base for a weekly calendar interface. It handles scrolling/swiping functionality and calendar events through a flexible modular design. The component is built with a prefilled week component and an optional week-view-popup for additional functionality. Its architecture includes slots for header elements, time displays, time indicators and events, enabling comprehensive customization. The component supports horizontal scrolling, configurable number of days display and features a time indicator for current time tracking.

Flexible modular design

Highly customizable

Smooth month scrolling and swiping

Optional popup functionality

Example

Architecture

week-view

Slot: week

week

Slot: header

week-header

Slot: number

week-header-number

Slot: day

week-header-day

Slot: event

week-header-event

Slot: time

week-time

Slot: indicator

week-time-indicator

Slot: event

week-event

Slot: popup This is optional.

week-view-popup

Slot: default

Reference

Week View

This is the root container for the week view of the calendar, providing a comprehensive structure that includes week headers, time slots, time indicators, and events. It also supports an optional popup for additional interactions or information display.
- Attributes
  - css-prefix
    
    string
    
    /
    
    default: sparkcal
    
    Prefix for all CSS variables
  - 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)
  - number-of-days
    
    number
    
    /
    
    default: 7
    
    The number of days that should be displayed
  - scroll-direction
    
    enum
    
    /
    
    default: horizontal
    
    Direction in which the week 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
    
    string
    
    /
    
    default: today
    
    The first day of the view. Format should be YYYY-MM-DD
  - swipe-speed-threshold
    
    number
    
    /
    
    default: 0.5
    
    Speed in pixels per millisecond required for a swipe gesture to change the week, 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 week
  - width
    
    string
    
    /
    
    default: 100%
    
    Width of the component
- Events
  - On event click
    
    Fired when a user clicks on a calendar event
  - On hour click
    
    Fired when a user clicks on an hour of the day
  - On week change
    
    Fired when the week is changed through swipe or scroll
- Style Variables
  - --'css-prefix'-week-view-height
    
    Height of the week view
  - --'css-prefix'-week-view-width
    
    Width of the week view
Week

The week component displays the actual week within the week-view. It is not standalone and must be a child of the week-view in the week slot.
- Attributes
  - bg-color
    
    string
    
    /
    
    default: #171717
    
    Background color of the week
  - event-spacing
    
    string
    
    /
    
    default: 0.125rem
    
    Spacing between events
  - hour-height
    
    string
    
    /
    
    default: 2.75rem
    
    Height of one hour
  - line-color
    
    string
    
    /
    
    default: #404040
    
    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'-week-bg-color
    
    Background color of the week
  - --'css-prefix'-week-hour-height
    
    Height of one hour
  - --'css-prefix'-week-line-color
    
    Color of the separator lines
  - --'css-prefix'-week-line-width-horizontal
    
    Width of the horizontal lines
  - --'css-prefix'-week-line-width-vertical
    
    Width of the vertical lines
Week Header

The week-header component is the header used in the week component. It is not standalone and must be used as a child of the week component in the header slot.
- Attributes
  - bg-color
    
    string
    
    /
    
    default: #262626
    
    Background color of the container
  - border-color
    
    string
    
    /
    
    default: #525252
    
    The border color of the week header
  - border-width
    
    string
    
    /
    
    default: 1px
    
    Border width of the week header
- Style Variables
  - --'css-prefix'-week-header-bg-color
    
    The background color of the week header
  - --'css-prefix'-week-header-border-color
    
    Border color of the week header
  - --'css-prefix'-week-header-border-width
    
    Border width of the week header
Week Header Number

The week-header-number component displays the week number in a week. It is not standalone and must be used in the number slot of the week-header component.
- Attributes
  - bg-color
    
    string
    
    /
    
    default: #404040
    
    Background color of the container
  - border-radius
    
    string
    
    /
    
    default: 0.25rem
    
    Border radius of the container
  - color
    
    string
    
    /
    
    default: #A3A3A3
    
    The text color of the week header number
  - container-padding-horizontal
    
    string
    
    /
    
    default: 0.25rem
    
    Horizontal container padding
  - container-padding-vertical
    
    string
    
    /
    
    default: 0rem
    
    Vertical container padding
  - font-family
    
    string
    
    /
    
    default: inherit
    
    Font family of the week header number
  - font-size
    
    string
    
    /
    
    default: 1rem
    
    Font size of the week header number
  - font-weight
    
    string
    
    /
    
    default: 400
    
    Font weight of the week header number
  - horizontal-align
    
    string
    
    /
    
    default: end
    
    Horizontal alignment of the week header number
  - number-padding-horizontal
    
    string
    
    /
    
    default: 0.5rem
    
    Horizontal inner padding
  - number-padding-vertical
    
    string
    
    /
    
    default: 0.25rem
    
    Vertical inner padding
  - vertical-align
    
    string
    
    /
    
    default: center
    
    Vertical alignment of the week header number
- Style Variables
  - --'css-prefix'-week-header-number-bg-color
    
    Background color of the container
  - --'css-prefix'-week-header-number-border-radius
    
    Border radius of the container
  - --'css-prefix'-week-header-number-color
    
    The text color of the week header number
  - --'css-prefix'-week-header-number-container-padding-horizontal
    
    Horizontal container padding
  - --'css-prefix'-week-header-number-container-padding-vertical
    
    Vertical container padding
  - --'css-prefix'-week-header-number-font-family
    
    Font family of the week header number
  - --'css-prefix'-week-header-number-font-size
    
    Font size of the week header number
  - --'css-prefix'-week-header-number-font-weight
    
    Font weight of the week header number
  - --'css-prefix'-week-header-number-horizontal-align
    
    Horizontal alignment of the week header number
  - --'css-prefix'-week-header-number-number-padding-horizontal
    
    Horizontal inner padding
  - --'css-prefix'-week-header-number-number-padding-vertical
    
    Vertical inner padding
  - --'css-prefix'-week-header-number-vertical-align
    
    Vertical alignment of the week header number
Week Header Day

The week-header-day component displays the weekday and the date in a week header. It is not standalone and must be used in the day slot of the week-header.
- Attributes
  - bg-color
    
    string
    
    /
    
    default: #262626
    
    Background color of the container
  - color-date
    
    string
    
    /
    
    default: #525252
    
    Text color of the date
  - color-weekday
    
    string
    
    /
    
    default: #FFFFFF
    
    Text color for the weekday
  - color-weekend
    
    string
    
    /
    
    default: #737373
    
    Text color for the weekend
  - font-family
    
    string
    
    /
    
    default: inherit
    
    Font family of the week header day
  - font-size-date
    
    string
    
    /
    
    default: 0.875rem
    
    Font size of the date
  - font-size-weekday
    
    string
    
    /
    
    default: 0.875rem
    
    Font size of the weekday
  - font-weight-date
    
    string
    
    /
    
    default: 400
    
    Font weight of the date
  - font-weight-weekday
    
    string
    
    /
    
    default: 500
    
    Font weight of the weekday
  - format-date-config
    
    object
    
    /
    
    default: {"month":"2-digit", "day": "2-digit"}
    
    Date format configuration
  - height
    
    string
    
    /
    
    default: 3rem
    
    Height of the component
  - number-of-characters
    
    number
    
    /
    
    default: 2
    
    Number of characters to display
  - spacing
    
    string
    
    /
    
    default: 0.125rem
    
    Spacing between weekday and date
  - text-transform
    
    enum
    
    /
    
    default: uppercase
    
    Text transform style
- Style Variables
  - --'css-prefix'-week-day-header-bg-color
    
    Background color of the container
  - --'css-prefix'-week-day-header-color-date
    
    The text color of the date
  - --'css-prefix'-week-day-header-font-family
    
    Font family of the week header day
  - --'css-prefix'-week-day-header-font-size-date
    
    Font size of the date
  - --'css-prefix'-week-day-header-font-weight-date
    
    Font weight of the date
  - --'css-prefix'-week-day-header-height
    
    Height of the container
  - --'css-prefix'-week-day-header-spacing
    
    Spacing between weekday and date
Week Header Event

The week-header-event component displays all-day events in a week header. It is not standalone and must be used in the event slot of the week-header.
- Attributes
  - bg-color
    
    string
    
    /
    
    default: #1D4ED8
    
    Background color of the event
  - bg-color-hover
    
    string
    
    /
    
    default: #2563EB
    
    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-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
  - padding
    
    string
    
    /
    
    default: 0.25rem
    
    Inner padding
  - past-opacity
    
    number
    
    /
    
    default: 0.5
    
    The opacity of the event if it is in the past
  - spacing
    
    string
    
    /
    
    default: 0.25rem
    
    Spacing between 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'-week-header-event-bg-color
    
    Default background color of the event
  - --'css-prefix'-week-header-event-bg-color-hover
    
    Default background hover color of the event
  - --'css-prefix'-week-header-event-border-radius
    
    Border radius of the event
  - --'css-prefix'-week-header-event-color
    
    The default text color of the event
  - --'css-prefix'-week-header-event-color-hover
    
    The default text hover color of the event
  - --'css-prefix'-week-header-event-font-family
    
    Font family of the event title
  - --'css-prefix'-week-header-event-font-size
    
    Font size of the event title
  - --'css-prefix'-week-header-event-font-weight
    
    Font weight of the event title
  - --'css-prefix'-week-header-event-height
    
    Height of the event
  - --'css-prefix'-week-header-event-padding
    
    Inner padding
  - --'css-prefix'-week-header-event-past-opacity
    
    The opacity of the event if it is in the past
  - --'css-prefix'-week-header-event-spacing
    
    Spacing between events
  - --'css-prefix'-week-header-event-transition-duration
    
    Duration for CSS transitions for the hover effect
  - --'css-prefix'-week-header-event-transition-easing
    
    Easing function for CSS transitions for the hover effect
Week View Popup

The week-view-popup component is a popup for the week-view. It must be placed in the popup slot of the week-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 week-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'-week-view-popup-max-width
    
    Maximum width of the popup
  - --'css-prefix'-week-view-popup-spacing-edge
    
    Spacing from the edge of the week-view
Week Event

The week-event component displays the calendar events of a week. It is not standalone and has to be placed in the event slot of the week component.
- Attributes
  - bg-color
    
    string
    
    /
    
    default: #1D4ED8
    
    Background color of the event
  - bg-color-hover
    
    string
    
    /
    
    default: #2563EB
    
    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-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
  - padding
    
    string
    
    /
    
    default: 0.25rem
    
    Inner padding
  - past-opacity
    
    number
    
    /
    
    default: 0.5
    
    The opacity when the event is in the past
  - 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'-week-event-bg-color
    
    Default background color of the event
  - --'css-prefix'-week-event-bg-color-hover
    
    Default background hover color of the event
  - --'css-prefix'-week-event-border-radius
    
    Border radius of the event
  - --'css-prefix'-week-event-color
    
    The default text color of the event
  - --'css-prefix'-week-event-color-hover
    
    The default text hover color of the event
  - --'css-prefix'-week-event-font-family
    
    Font family of the event title
  - --'css-prefix'-week-event-font-size
    
    Font size of the event title
  - --'css-prefix'-week-event-font-weight
    
    Font weight of the event title
  - --'css-prefix'-week-event-padding
    
    Inner padding
  - --'css-prefix'-week-event-past-opacity
    
    The opacity of the event if it is in the past
  - --'css-prefix'-week-event-transition-duration
    
    Duration for CSS transitions for the hover effect
  - --'css-prefix'-week-event-transition-easing
    
    Easing function for CSS transitions for the hover effect
Week Time

The week-time component displays time in a week. It is not standalone and must be used in the time slot of the week component.
- Attributes
  - color
    
    string
    
    /
    
    default: #525252
    
    Text color of the time
  - font-family
    
    string
    
    /
    
    default: inherit
    
    Font family for the time
  - font-size
    
    string
    
    /
    
    default: 0.875rem
    
    Font size of the time
  - font-weight
    
    string
    
    /
    
    default: 400
    
    Font weight of the time
  - hour-format
    
    enum
    
    /
    
    default: 12h
    
    Height of the component
  - padding-right
    
    string
    
    /
    
    default: 0.25rem
    
    Padding on the right side
  - width
    
    string
    
    /
    
    default: 4rem
    
    Width of the component
- Style Variables
  - --'css-prefix'-week-time-color
    
    Text color of the time
  - --'css-prefix'-week-time-font-family
    
    Font family for the time
  - --'css-prefix'-week-time-font-size
    
    Font size of the time
  - --'css-prefix'-week-time-font-weight
    
    Font weight of the time
  - --'css-prefix'-week-time-padding-right
    
    Padding on the right side
  - --'css-prefix'-week-time-width
    
    Width of the component
Week Time Indicator

The week-time-indicator component indicates the current time of the day. It is not standalone and must be used in the indicator slot of the week component.
- Attributes
  - circle-size
    
    string
    
    /
    
    default: 0.5rem
    
    Size of the indicator circle
  - color
    
    string
    
    /
    
    default: #A3A3A3
    
    Color of the indicator
  - line-width
    
    string
    
    /
    
    default: 1px
    
    Width of the indicator line
- Style Variables
  - --'css-prefix'-week-time-indicator-circle-size
    
    Size of the indicator circle
  - --'css-prefix'-week-time-indicator-color
    
    Color of the indicator
  - --'css-prefix'-week-time-indicator-line-width
    
    Width of the indicator line

Context

weekViewContext

Contains the current state of the week view and handlers for events
weekViewPopupContext

Contains the current event that is opened in the popup

Week View

Architecture

Reference

Week View

Attributes

Events

Style Variables

Week

Attributes

Style Variables

Week Header

Attributes

Style Variables

Week Header Number

Attributes

Style Variables

Week Header Day

Attributes

Style Variables

Week Header Event

Attributes

Style Variables

Week View Popup

Attributes

Style Variables

Week Event

Attributes

Style Variables

Week Time

Attributes

Style Variables

Week Time Indicator

Attributes

Style Variables

Context

weekViewContext

weekViewPopupContext