Feature : CSS class names and attributes for days, hours

[glennwilton]

Is your feature request related to a problem? Please describe.

I want to use CSS to highlight certain days, highlight selected day, highlight certain hour ranges.

Describe the solution you'd like
Add in class names related to the to a lot of the elements in, these are additional class names not used by the schedule-x but there for the dev to use

• .sx__week-grid__date -> add day names .sx_week-grid_thursday
• .sx__time-grid-day -> add day names sx__time-grid-day_thursday
• .sx__week-grid__hour -> add actual hour .sx__week-grid__hour17
• add data-time-grid-date="2024-04-28" to the headers, I can use "div[data-time-grid-date="2024-04-28"]" for the days but not headers

Also add a selected class to sx__time-grid-day.selected_day and sx__week-grid__date.selected_day for the selected day so I can CSS style the selected day.

Additional context
For a lot of these I can add in direct styling or sudo :before :after classes to highlight zones

Things that could speed up the process

[tomosterlund]

Hi! Weekday names will already be added as a part of another issue: #309

data-time-grid-date sounds like a good idea. Let's do it ✅
We could add is-selected for selected days ✅

Can you help me understand your use case for the week grid hours though? Currently those are only 1px lines, you won't be able to style the background of an hour or anything

[glennwilton]

For the hours I wanted to mark off zones during the day to not schedule work, or to make work hours.

I was thinking of adding psudo :before elements to the hours, but thinking about it might be better to add a slot for each day, so I can add some background divs behind the events.

[glennwilton]

Update to this, I might not need a slot or CSS for weekday hours to block out times.

If we could turn off draggable and resize per event (previously discussed) I could include some special events that can not be moved, I can style these however I want. However would need to turn off the width resize for overlapping events.

But long term, what would be better is to include background events, background events would be:

• fixed ( can not be dragged or moved)
• have an sx_event_background class, (perhaps 50% opacity by default)
• Are drawn first (perhaps a different z-index)
• perhaps do not trigger onClick Events
• Do not resize with overlapping current events.

I can see several use cases here:

• Showing other people calender events behind yours
• Showing holidays (full-day event from 9am to 6pm as background)
• Showing breaks, lunchtimes
• Showing blocked-off time for meetings

It would be up to the developer to add these in, but I can see preloading 20 holidays for the year as background events helpful.

To implement, either set a property in the event

event = {
  sxOptions: {
     background: true 
  }
}

or but by a separate list in the config.

const calendar = createCalendar({
  events: []
  backgroundEvents: []
}

eventsServicePlugin.background.get()
eventsServicePlugin.background.getAll()
eventsServicePlugin.background.add()
eventsServicePlugin.background.update()
etc....

Having background Events as its own array could be easy from a code point of view, you just draw two lists of events background[] + events[] with different default classes and options

OR Layers!!! Like CalendarID, Perhaps a better solution to setting special props per Event, You can create seperate layers with different props

Layers = [
   {
       id: 'holidays',
       visible: true,
       order: 2
       dragable: false,
       resizeable: false,
       interactable: false,
       overlap: false // don't resize on overlap 
       className: 'holiday' // Add to each event
       opacity: 0.6;
    },
    {
       visible: true,
       id: 'default',
       order: 2
       dragable: true,
       resizeable: true,
       interactable: true
    }
]

event = {
     laverID="holiday"
}

When drawing the calendar.

• Split events based on LayerID
• Draw based on LayerOrder
• Layers can be invisible