Initialize

This is what gets the calendar to appear on your screen. Without this, it's a no go!

https://vimeo.com/592959821vimeo.com

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

https://vimeo.com/571293051vimeo.com

Time Slot Display

Daily Start Time default: 00:00

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

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

default: 00:30

• This input allows you to control the calendar time slot length

• Default is 30 minutes

Scroll Time

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

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 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

[timeGridDay,timeGridWeek,timelineDay,timelineWeek,dayGridDay,dayGridWeek,dayGridMonth,listDay,listWeek,listMonth,listYear,customView1,customView2,resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth,resourceDayGridDay,resourceDayGridWeek,resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth]

Calendar Styles Settings

• 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

• 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

• 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

• #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

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

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

Use Date Dots (only applies to month view

• when this box is checked, in month view, events will appear like this

and when not checked will look like this

Dot Color

• when date dots are being used, you can set them here and then dynamically here

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

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

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!

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