> For the complete documentation index, see [llms.txt](https://jared-gibb.gitbook.io/fullcalendar-plugin-suite/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jared-gibb.gitbook.io/fullcalendar-plugin-suite/elements/calendar/actions/initialize.md). # Initialize ![](/files/-MdqOfDwvdRLwd0CoLX5) {% embed url="" %} ## Initialize Calendar Input Fields ### New event Colors * These refer to the color of events when you are click-and-dragging to create an event. The created placeholder will adhere to these self-explanatory color values ![](/files/-MdqY4UXH_5ta34ocqBn) {% embed url="" %} ## Time Slot Display ![](/files/-MdrQbibp4z3msvd55su) ### Daily Start Time `default: 00:00` ```javascript default: 00:00 ``` * This input restricts the earliest time of day the calendar will display **and must be set in a 24-hour 00:00 format** * This makes it easy to restrict what people can see and when they can potentially create a calendar event. * This can also be used to produce a cleaner output. Perhaps you really only need to see a certain set of hours per day. ### Daily End Time `default: 24:00` ```javascript default: 24:00 ``` * This input restricts the latest time of day the calendar will display **and must be set in a 24-hour 00:00 format** * This makes it easy to restrict what people can see and when they can potentially create a calendar event. * This can also be used to produce a cleaner output. Perhaps you really only need to see a certain set of hours per day. ### Time Slot Duration ```javascript default: 00:30 ``` * This input allows you to control the calendar time slot length * Default is 30 minutes ![](/files/-MdrSxRAfXAI03JZdzal) ### Scroll Time ```javascript default: 09:00 ``` * This input controls the time of day the calendar starts scrolled to and takes a 24:00 hour input. * Default is 09:00 or 9 AM ## Calendar View Settings ![](/files/-MdrsxaKhvR80xBjYZtD) ### Default Date * ***You must need to set the initial date.*** * There is no default value here. * This is kind of a fuzzy value at times. But, in essence, when you set this value the calendar holds a Date State. For example July, 4, 2021 2:39 PM EST. * Then, depending on the view, the calendar has to force that date to agree with the view. * So, If you have decided to [start your week ](broken://pages/-MddzXeDuLAVuCLmBQpR)on Sunday and you view your calendar in: * Month View * You'll be displayed the month of July * Now Indicator will emphasize the day of the month * Week View * You'll be displayed a date range of July 4 - 10 * Now Indicator will emphasize the day of the week and time of day * Day View * You'll be displayed the 4th of July * Now Indicator will emphasize the time of day ### Initial Calendar View * There are a lot of views. The following is a list of possible view names. * You can set this here and modify it later [here](/fullcalendar-plugin-suite/elements/calendar/actions/travel-through-time/change-calendar-view.md) ```javascript [timeGridDay,timeGridWeek,timelineDay,timelineWeek,dayGridDay,dayGridWeek,dayGridMonth,listDay,listWeek,listMonth,listYear,customView1,customView2,resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth,resourceDayGridDay,resourceDayGridWeek,resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth] ``` ## Calendar Styles Settings ![](/files/-MfDykLriEPe8qs9waIU) * Any acceptable Bubble CSS font or font family can be used here * Set the day cell borders to any color you would like * Set the day cell borders style for the inner cells of the table. * Set the day cell border width for the inner cells of the table. * Set the color of calendar text ## Header ![](/files/-MfDzZycge_0qI8CFeQy) * Choose whether or not to use a default header. If you do not use the default header you will likely want to control the calendar using [these options](/fullcalendar-plugin-suite/elements/calendar/actions/travel-through-time.md) * For the previous and next buttons you can use text or chevrons. no other choices at this time * Choose the calendar title text color ## Buttons ![](/files/-MfFvgJ3ync0r_PqHD0B) * \#1 * This will be the main color for buttons across the calendar header * \#2 * these colors will apply when any of the buttons across the top are hovered * \#3 * This will apply when a button is inactive. as far as I can tell, this only applies to the today button. when the current day is in view, you cannot click on the 'today' button * \#4 * This will apply to the current view's corresponding button ## Extras ![](/files/-MfE7tLLBg5qAx0HC9C9) ### Resource Font Size * this will set the font size when using a resource view. if you have a small calendar but long resource name, this can help you fit an extra 1-3 resources in your view. perhaps more. * can also be set dynamically [here](broken://pages/-MdeBNlWA-1P-WbyWyOU#resource-name-font) ### Resource Area Size * this setting takes a number in pixels to set the initial width when using the resource timeline view. * this only applies to resource timeline view ### Calendar Date format * This will set the way that day names are formatted in any view * can also be set dynamically [here](broken://pages/-MdeBRyI6pLmss05RQle#date-column) ### Use Date Dots (only applies to month view * when this box is checked, in month view, events will appear like this ![](/files/-MfE8E6ESNnZ2v55V7Jr) and when not checked will look like this ![](/files/-MfE9X-FPtB4oFda57bL) ### Dot Color * when date dots are being used, you can set them here and then dynamically [here](/fullcalendar-plugin-suite/elements/calendar/input-fields/required-inputs.md#default-colors) ### Long Event Background Color * set the color of the background of the long events when the date dot is checked. these only appear when the date dot is checked. set it dynamically [here too](/fullcalendar-plugin-suite/elements/calendar/actions/initialize.md#default-date) ### Click to view day * Check this box to click into day view of the clicked day. if this is not clicked, you'll need to navigate into day view by clicking the actual date and not anywhere in the day cell ### Verify Event Drop * when dragging -and-dropping events on the calendar, this setting will produce an alert prior to allowing the event to be dropped. ## Event Tooltips ![](/files/-MfEDqDJ56yNDdYfNxHZ) ### Display Tooltips * Check this box to display tooltips over events. The event title will be displayed but if there is a single request to do so, this choice will become more flexible. Until then, it's the title ;) ## Calendar Border ![want to control more features? just ask!](/files/-MfEE8lnMHHcTIkTCx7_) ### Border Width * This is taking a numeric value in pixels. This will control the outer border of the calendar ### Border Color * Set the color of the outer border --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://jared-gibb.gitbook.io/fullcalendar-plugin-suite/elements/calendar/actions/initialize.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.