Base UI

Calendar
Documentation
Available Parameters
Parameter Type Description
baseId Unique Text
required 		Set Unique Base ID for Calendar component.
mode Text
required 		Set mode for Calendar component.
List of available mode :
  • full
  • with-events
events Array of Event Item
Available for : with-events 		Set list of Events item.
Example:
[
    {
        "title"        : "New product launch",
        "start"        : "2024-05-10",
        "end"          : "2024-05-12",
        "classNames"   : "calendar-event-brand-secondary-2",
        "color"        : "#F9BD29"
    }
]
Starter Kit Codes
Starter Kit Code 
 {# include components/calendar  #}
 {% include "../../components/calendar.twig", with {
    	"baseId"	: "example-calendar-full",
	"mode"	: "full"
 } %}
Starter Kit Code 
 {# include components/calendar  #}
 {% include "../../components/calendar.twig", with {
    	"baseId"	: "example-calendar-1",
	"mode"	: "with-events",

	"events" 	: [
		{
			"title"		: "Monthly team meeting for Marketing page project",
			"start"		: "2024-05-02",
			"classNames"	: "calendar-event-brand-primary-1",
			"color"		: "#1F58D4"
		},
		{
			"title"		: "Hand-off Dashboard design project",
			"start"		: "2024-05-06",
			"classNames"	: "calendar-event-brand-primary-2",
			"color"		: "#93B1F4"
		},
		{
			"title"		: "New product launch",
			"start"		: "2024-05-10",
			"end"		: "2024-05-12",
			"classNames"	: "calendar-event-brand-secondary-2",
			"color"		: "#F9BD29"
		},
		{
			"title"		: "Agency Meeting",
			"start"		: "2024-05-28",
			"classNames"	: "calendar-event-brand-secondary-1",
			"color"		: "#04B04B"
		}
	]
 } %}