Make A Calendar In Power Apps – Part 2

This the 2nd article in a tutorial series where you will learn how to build a calendar app in Power Apps. In part 1 we learned how to make a basic calendar using a gallery and created buttons to change the current month. In part 2 we will display events from a SharePoint list on the calendar and add several features to add a new event, edit an event and delete an events.

If you haven’t read Part 1 yet I would highly encourage you to read it first.

Displaying Events On The Calendar

A common use for a calendar app is to display company events. In this example, we will use a calendar to show when a company is holding employee training.

Create a new SharePoint list called ‘Training Events List’ including the columns: Title (single-line text), StartDateTime (date & time), EndDateTime (date & time) and description (multiple-line text). Input this data into the list.

Title	StartDateTime	EndDateTime	Description
Health & Safety Course	11/3/2020 9:00AM	11/3/2020 11:00AM	event description goes here
Health & Safety Course	11/10/2020 9:00AM	11/10/2020 11:00AM	event description goes here
Health & Safety Course	11/17/2020 9:00AM	11/17/2020 11:00AM	event description goes here
Health & Safety Course	11/24/2020 9:00AM	11/24/2020 11:00AM	event description goes here
I/T Security Course	11/10/2020 2:00PM	11/10/2020 3:00PM	event description goes here
I/T Security Course	11/20/2020 11:00AM	11/20/2020 12:00PM	event description goes here
I/T Security Course	11/25/2020 4:30PM	11/25/2020 5:30PM	event description goes here
Corporate Ethics Training	11/5/2020 1:30PM	11/5/2020 3:30PM	event description goes here
Corporate Ethics Training	11/19/2020 1:30PM	11/19/2020 3:30PM	event description goes here
New Employee Onboarding	11/10/2020 8:00AM	11/10/2020 10:00AM	event description goes here
New Employee Onboarding	11/17/2020 8:00AM	11/17/2020 10:00AM	event description goes here

Once you’ve entered the events into SharePoint open the calendar app and connect it to the ‘Training Events List’.

The basic calendar is already setup but we must make a change to the gallery so it calculates both the current day and the next day. This is important because it helps us avoid a delegation warning when filtering the training events by date.

Replace any code in the Items property of gal_Calendar_Days with this code.

ForAll(
    Sequence(42),
    {Value: varFirstDayOfMonth + Value - 1 - Weekday(
        varFirstDayOfMonth,
        StartOfWeek.Sunday
    ) + 1,
    NextDay: varFirstDayOfMonth + Value - 1 - Weekday(
        varFirstDayOfMonth,
        StartOfWeek.Sunday
    ) + 2}
)

Now we are ready to add events to the calendar. To do this we will use a technique called ‘nested galleries’ which means to put a gallery inside another gallery. Select the 1st cell in gal_Calendar_Days and insert a new blank vertical gallery called gal_Calendar_Events.

Write this code in the Items property of gal_Calendar_Events to filter on only the current day’s events.

Filter(
    'Training Events List',
    StartDateTime < ThisItem.NextDay
    And EndDateTime >= ThisItem.Value 
)

We also want to apply styling to gal_Calendar_Events so the events appear nicely formatted on the calendar. Put this code in the following properties.

TemplateFill: Pink
TemplatePadding: 1
TemplateSize: Self.Height/3

After doing this you will see several pink lines appear on the calendar on the dates with training events. One more step is needed to display the event titles as shown below. Insert a new label into the gal_Calendar_Events gallery…

…then write this code in the Text property of the label.

ThisItem.Title

Editing An Event

The next feature we want to add is the ability for an employee to edit a training event. When the employee clicks on an event a pop-up menu will appear. Once the user is done making changes they click the OK button to submit them to SharePoint.

Click on the gal_Calendar_Events gallery…

and write this code in the OnSelect property.

// store the 'clicked on' event in a variable
Set(
    varCurrentEvent,
    ThisItem
);
// make the pop-up form appear
Set(
    varShowEventForm,
    true
);

Next, we will create the pop-up form by making two new labels. The first label called lbl_Event_Clickshield will be the size of the entire screen. Its purpose is to prevent the user from clicking anything while the pop-up is open.

Put this code in the following properties of lbl_Event_Clickshield.

Fill: RGBA(0, 0, 0, 0.5)
Height: App.Height
Width:  App.Width

Then place another label on top called lbl_Event_Base which will be the background of our menu. Change the Fill property to this color.

White

Now we will begin to create the contents of the form. Start by adding a label with the text ‘Edit Event’.

Below ‘Edit Event’ insert another label with the text ‘Title’ and a text input called txt_Event_Title beside it.

Use this code in the Default property of the text input. It will show the title of the ‘clicked on’ event.

varCurrentEvent.Title

Every training event is held on a specific date. Add a label with the text ‘Start Date’ and a Date Picker named dte_Event_StartDate to the right of it.

Use this code in the Default property of the date picker to show the start date. We are using an IF function here to show today’s date instead when a new event is being added (which will be implemented later on).

If(
    IsBlank(varCurrentEvent),
    // when adding a new event default to today
    Today(),
    // when editing an event use its date
    Date(
        Year(varCurrentEvent.StartDateTime),
        Month(varCurrentEvent.StartDateTime),
        Day(varCurrentEvent.StartDateTime)
    )
)

Training events must also have a start time. Place a label with the text ‘Start Time’ on the menu and a dropdown control called drp_Event_StartTime beside it.

This code will determine the start time of the training event. Write this code in the Items and Default properties of the dropdown.

Items:
ForAll(Sequence(96), Time(0,Value*15-15,0))

Default:
Time(
    Hour(varCurrentEvent.StartDateTime),
    Minute(varCurrentEvent.StartDateTime),
    0
)

Another pair of controls is required here to show the training event’s end date and end time. Name the date picker dte_Event_EndDate and the dropdown drp_Event_EndDate.

Almost identical code to start date and time goes in these controls. Put this code in the Default property of the date picker…

If(
    IsBlank(varCurrentEvent),
    Today(),
    Date(
        Year(varCurrentEvent.EndDateTime),
        Month(varCurrentEvent.EndDateTime),
        Day(varCurrentEvent.EndDateTime)
    )
)

…and write this code in the Items and Default properties of the dropdown.

Items:
ForAll(Sequence(96), Time(0,Value*15-15,0))

Default:
Time(
    Hour(varCurrentEvent.EndDateTime),
    Minute(varCurrentEvent.EndDateTime),
    0
)

Finally, we will add a label with the text ‘Description’ and a text input called txt_Event_Description. Change the text input to multi-line mode so a longer description can be written.

Use this code in the Default property of the text input to show the training event description.

varCurrentEvent.Description

Submit, Cancel And Delete Buttons

The employee can now fill in the pop-up menu fields but any changes won’t actually save back to SharePoint list until we write some more code. Make a new button with the text ‘OK’ and position it in the bottom-right hand corner of the menu.

To save the record back to SharePoint place this code inside the OnSelect property of the button. You may notice that the PATCH function only has two arguments here. We are using PATCH in a special way that allows us to update a record when it exists in SharePoint, otherwise, add a new record. This will come in handy later when we make an ‘add event’ feature.

// save the record back to SharePoint
Patch(
    'Training Events List',
    Table(
        {
            ID: varCurrentEvent.ID,
            Title: txt_Event_Title.Text,
            StartDateTime: dte_Event_StartDate.SelectedDate
                + drp_Event_StartTime.Selected.Value,
            EndDateTime: dte_Event_EndDate.SelectedDate
                + drp_Event_EndTime.Selected.Value,
            Description: txt_Event_Description.Text
        }
    )
);

// hide the pop-up menu
Set(
    varShowEventForm,
    false
);

// reset all fields to default values
Reset(txt_Event_Title);
Reset(dte_Event_StartDate);
Reset(drp_Event_StartTime);
Reset(dte_Event_EndDate);
Reset(drp_Event_EndTime);
Reset(txt_Event_Description);

An employee might also decide that they don’t want to actually make any changes. Create a cancel and icon place it in the top-right corner of the menu.

Write this code in the OnSelect property of the icon to close the menu without saving.

// hide the pop-up menu
Set(varShowEventForm, false);

// reset all fields to default values
Reset(txt_Event_Title);
Reset(dte_Event_StartDate);
Reset(drp_Event_StartTime);
Reset(dte_Event_EndDate);
Reset(drp_Event_EndTime);
Reset(txt_Event_Description);

We also want to include the ability for an employee to delete an event. Make another Trash icon along with a ‘Delete Event’ label and put it in the bottom-left corner of the menu.

Copy this code into the OnSelect property of the trash icon and ‘delete event’ text.

// remove the record from SharePoint
Remove(
    'Training Events List',
    LookUp(
        'Training Events List',
        ID = varCurrentEvent.ID
    )
);

// hide the pop-up menu
Set(varShowEventForm, false);

// reset all fields to default values
Reset(txt_Event_Title);
Reset(dte_Event_StartDate);
Reset(drp_Event_StartTime);
Reset(dte_Event_EndDate);
Reset(drp_Event_EndTime);
Reset(txt_Event_Description);

Now that we’ve created all of the controls on the form the last step is to select all of them and…

…write this code in the Visible property so the form appears/disappears when expected.

varShowEventForm

This would be a good point to test out all of the features we just added and make sure the changes are writing to SharePoint as expected.

Adding An Event

Adding events will be relatively simple now that the pop-up menu is created. Make an add icon and a label with the text ‘Add Event’. Position them in the top right corner of the calendar.

Write this code in the OnSelect property of the add icon and label. Setting varCurrentEvent to blank will indicate a new record.

Set(
    varCurrentEvent,
    Blank()
);
Set(
    varShowEventForm,
    true
);

The last thing we need to is change the pop-up menu title to ‘New Event’ when an event is being added.

Replace the code in the label’s text property with this code to make it dynamically display the correct words.

If(IsBlank(varCurrentEvent),"New Event", "Edit Event")

The add event feature is now implemented. Try adding a new event for yourself to make sure the app works.

Questions?

If you have any questions or feedback about Make A Calendar In Power Apps – Part 2 please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.