CSS class to help define entries that need to appear on booking and scheduled calendars in a separate colours

There is a the new form property that enables users to specify a css class that will be added to events on any calendars (athlete calendar, related entity calendar, and scheduling / appointment calendar, as well as the My Schedule view on mobile and the scheduling / appointment calendars on mobile).

This allows some css to be written to customise a particular type of event in calendars (e.g. random "I am busy" events for doctors) and to have all entries of this type displayed the same way - even if there are multiple events of this type being entered.

The system automatically adds this css class to the relevant places where necessary. However, without custom css added to the custom css files (one for the main app, one for mobile) nothing will look any different. The power of this features comes from allowing the user to specify things.

The following css adds some demo custom styling to certain events to show some of what can be achieved by this feature. It assumes that the value 'custom-css' is added to one or more events in the new advanced property that has been added. The comments for each entry are to indicate what each part does. To adapt this to a client scenario youwould simply need to update the value 'custom-css' to whatever the client wants (e.g. 'busy-time') in the css file(s) as well as in the advanced form property. As much as possible the styling has been kept the same between the main app and the mobile app to show consistency across both platforms.

In the custom css file for the main app:

/* This just controls the main background color */

.custom-css {

   background-color: grey;

}

/* This controls the date entry */

.custom-css .gwt-Label  {

   color: black;

   font-style: italic;

   text-align: center;

   background-color: orange;

   padding: 5px;

   margin: 2px -2px 0 -2px;

   border-radius: 5px;

}

/* This controls the event summary */

.custom-css .ftrgwtdate-eventMonth {

   color: blue;

   text-align: center;

   padding: 5px;

}

In the custom css file for the mobile app (both m.html and iOS once the new release goes out:

/* Background color / main color for list item in summary view */

.custom-css .ui-btn.ui-btn-a {

   background-color: grey;

   color: white;

}

/* Background color / main color for list item in summary view during hover */

/* NOTE: background needs !important for it to override main mobile styling */

.custom-css .ui-btn.ui-btn-a:hover {

   background-color: lightgrey !important;

   color: white;

}

/* Form Name for list item in summary view */

.custom-css .ui-btn-text {

   color: blue;

}

/* Date entry for list item in summary view */

.custom-css .ui-li-aside.ui-li-desc {

   color: black;

   background-color: orange;

   padding: 5px;

   border-radius: 5px;

   font-style: italic;

}

/* Athlete name for list item in summary view */

.custom-css .ui-li-subheading {

   margin: 5px 0 -5px 0;

   padding-left: 10px;

   font-style: italic;

}

/* Event summary for list item in summary view */

.custom-css .ui-li-desc {

   color: blue;

   margin: 10px 0 -5px 0;

   padding-left: 10px;

}

/* Background color for entry in scheduled calendar */

/* Also controls the event summary in the scheduled calendar */

.custom-css.ui-calendar-event {

   background-color: grey;

   color: blue;

}

For example, this form that show that a Physio is unavailable has a css class set for it (and the relevant css file has been updated with the above code on this site)

For example, this form that show that a Physio is unavailable has a css class set for it (and the relevant css file has been updated with the above code on this site)

Now when this form is entered on the system it appears with the css colouring.

Now when this form is entered on the system it appears with the css colouring.

Note that any other Forms set with the same css class would appear with the same styling.

This styling is applied on the Related Entity Calendar

The colours appear on the normal calendar

Because the mobile also has css style that can be applied, this event is coloured on the mobile app as well.

0 Comments

Add your comment

E-Mail me when someone replies to this comment