Month calendar

Use lcsMonthCalendar for bookings, shifts, leave, deadlines, visits: anything people want to see by month. Every calendar in a canvas app is rebuilt from a 42-cell gallery and a weekday offset, and the hard part, an event that runs across several days, is usually given up on. This component is that calendar done once:

• A month grid from any date, with the week starting on Monday or Sunday, the days outside the month greyed, and today marked;
• Events from a table of Key, Title, Start, End and Color, drawn as pills that run across the days they span, rounded only at their ends, the title on the first day and at the start of each week;
• MaxPerDay pills a day, then "+2 more" beside the day's number;
• Previous, next and Today, GoToMonth and Select from your app, and OnMonthChange so you load one month's events at a time;
• OnSelectDay(SelectedDate) for a new booking on that day, and OnSelectEvent(Key, Title, Start) to open one.

The examples call it calRooms on a bookings screen.

Adding events to a day. The calendar draws exactly the rows in its Events table, so to put an event (or several) on a date, add rows to the collection it reads. Selecting a day runs OnSelectDay with that date, which is the place to add one, or to open your own form first:

// Screen.OnVisible: start a collection for the calendar to read
ClearCollect(colEvents, Table({Key: "e1", Title: "Fire drill", Start: Today(), End: Today(), Color: "#c50f1f"}))

// calRooms.Events
colEvents

// calRooms.OnSelectDay: a new event on the day selected; select again and they stack
Collect(colEvents, {Key: Text(GUID()), Title: "New booking", Start: SelectedDate, End: SelectedDate, Color: "#0f6cbd"})

// An event over three days: End two days after Start
Collect(colEvents, {Key: Text(GUID()), Title: "Training", Start: SelectedDate, End: DateAdd(SelectedDate, 2, TimeUnit.Days), Color: "#7c3aed"})

A day shows up to MaxPerDay events, then "+N more". Remove one from OnSelectEvent with Remove(colEvents, LookUp(colEvents As e, e.Key = Key)), or save to your data source with Patch and refresh the collection.

One month's bookings at a time, from Dataverse:

// Screen.OnVisible, and calRooms.OnMonthChange
ClearCollect(
    colBookings,
    ForAll(
        Filter(Bookings, 'End date' >= calRooms.VisibleMonth && 'Start date' < DateAdd(calRooms.VisibleMonth, 1, TimeUnit.Months)) As b,
        {Key: Text(b.Booking), Title: b.Room.Name & ": " & b.Title, Start: b.'Start date', End: b.'End date', Color: ""}
    )
)

// calRooms.Events
colBookings

A new booking on the day selected, and opening an existing one:

// calRooms.OnSelectDay
Navigate(scrNewBooking, ScreenTransition.None, {day: SelectedDate})

// calRooms.OnSelectEvent
Navigate(scrBooking, ScreenTransition.None, {ID: GUID(Key)})

Colour by room:

// In the ForAll above
Color: Switch(b.Room.Name, "Room 4", "#0f6cbd", "Room 7", "#7c3aed", "#616161")

Jump to a date from a date picker:

// dpJump.OnChange
calRooms.Select(dpJump.SelectedDate)

• Columns. Events wants exactly Key, Title, Start, End and Color; build the rows with ForAll as in Use it. Start and End are dates; a date-and-time column works too, because the calendar compares the date part only.
• One month at a time. The filter in OnMonthChange is delegable (two date comparisons), so the app only ever holds a month of rows, and the 42 cells each filter that small table.
• Multi-day events need an End on or after Start; for a one-day event, set both the same. An event that runs past the month's edge shows on the days inside it and carries on next month.
• Time zones. Date-only columns are safe. A date-and-time column set to user local shows on the day it falls for the person; one set to time-zone independent shows the stored day.

• The grid is a group named by the month, inside which each day is a button named "Tuesday 13 October, today, 2 events, selected"; each pill is a button named by the event's title and dates; the weekday row is a group. Tab moves through the days and the pills in order; Enter and Space select.
• Today has a filled circle behind its number; the selected day has a tinted cell and a ring, and "selected" in its name; the pills are colour and title, so nothing is colour alone.
• With Motion on, the pills draw in from the left when the month changes, and the selected day's ring pops in. None plays for people who've asked their device for reduced motion, and Motion off draws them at once.

• Each day shows MaxPerDay pills; the rest fold into "+N more", and selecting the day is how to see them (open the day's list from OnSelectDay).
• A pill's title shows on the event's first day and at the start of each week, so a long event never has an unlabelled row; the title is cut at the cell's edge, and the full title is in the pill's name and tooltip.
• The pills are drawn in the order your table gives them; sort Events by Start for a tidy stack.
• No week or day view, and no drag to move an event; OnSelectEvent opens it and your form moves it.

• 0.1.0: first version: the month grid, events as spanning pills, +N more, today, selection, previous, next, Today, GoToMonth, Select, OnSelectDay, OnSelectEvent, OnMonthChange, the outputs, light and dark, the pill and ring motion.