How to create a calendar

Hello and welcome to your new GoodBarber tutorial! 

Today we’ll learn how to create a Calendar in your app.

Let's add our section in the menu My app > Content > Sections.
Click on Add a section. 

Select Calendar.

I name my section and add it.

Now let's edit the content.

I click on Create an event.

And give a title to my event.

I choose the start date and time and the end date and time

I can also indicate if my event lasts all day.

I add a location if needed.

And I add the elements I need to describe my event.

On the right side I select the section(s) where I want to display my event.

I can insert action buttons, urls to external sites, and enable comments. 

Let’s go to the SEO tab to edit my metadata.

All I have to do now is publish!

Let’s move on to the design 

I go to the design editing page of my Calendar section.

And start with the list view.

Let’s start with the color of the background and borders.

The display of thumbnails, info and summary.

Then the display of the date.

Here you have several options:

Starting time: This will display the specific start time of the event if it is not an all day event. 
If the event is a full day event, it will display the "24" icon indicating that the event is a full day event.

Start date: used for events that are spread over several days or over one day.
It will display the start date of the event even if you are on the second date. 

Today's date: used for events that are spread over several days or one day.
It will display the current date of the event.

Mention now: will display "now" instead of the date if the date is today's date. 
Future dates will always be displayed with the date. 

Then the colors and fonts of the texts.

The color of the date...

The display of the map if you have entered addresses.

And finally the thumbnail.

We quickly do the same for the event details view. 

And voila!  My section is fully designed ! 

Last tip ! don't forget to set your time zone from the My account menu, because the time of your events will be based on it.

You now know how to create an agenda in your app! 

See you soon for another tutorial !