The Full Calendar accepts advanced configuration and CSS Style, to create a better UX/UI experience.
Let’s start to add and change some of the CSS Style.
As you can see in the picture above, after the start time of the event, the letter “a” or “p” is being shown. The “a” represents “am” and “p” represent “pm”. On our Calendar, we just want to show the events per day. So to remove the information about the Time we can edit the CSS Style.
Open the Dates screen and click on the CSS style editor.
On the Dates Tab add the next style.
Now, let’s change the background-color of the Calendar widget, and give different colors to events having in mind the event priority value.
To the CSS added before, add a new class with the style that will define the background color of your Calendar.
background-color: rgba(191, 245, 132, 0.50);
To add a color based on the priority, we can define an IF logic, on the color property of newEventSourceData. To do that, open the Preparation action of the Dates screen and add the logic below, on the Color property.
If(Schedule.PriorityId = Entities.Priority.High, “Red”, If (Schedule.PriorityId = Entities.Priority.Medium, “Orange”, “Green”))
The final result of the Calendar will be similar to the image below.
Now that you have the skills to display a range of Events in Calendar view, you can improve your skills, adding new styles and behaviour to your Full Calendar. To improve it, you can consult the Full Calendar documentation at https://fullcalendar.io/.