How to configure FULLCALENDAR component in vFlow?

How to configure FULLCALENDAR component in vFlow ?

  1. Navigate to the Component tab and click on the Add Component button to open the component list.
  2. Select the Full calendar component from the list.
  3. Enter basic details, UI properties, add datasource and submit the component.
  4. The datasource must be in the format mentioned below:

[ { “id”: “0”, “title”: “All-day event”, “start”: “2022-07-14” },

{ “id”: “1”, “title”: “Timed event 1”, “start”: “2022-07-14T11:00:00” },

{ “id”: “2”, “title”: “Timed event 2”, “start”: “2022-07-14T17:00:00”, “end”: “2022-07-14T18:00:00” } ]

  1. Go to Additional Properties, and set the desired properties.
  2. ‘Show Navigation Buttons’ checkbox is set true by default. This will show the Previous and Next Buttons on the calendar which will navigate to previous or next month/week/day.
  3. ‘Show Calendar View Buttons’ when checked, will show the day, week and month buttons.
  4. ‘Show Indicator’ checkbox when checked, shows a red indicator on current time.
  5. ‘Calendar Height’ will set the calendar height, Event color and Event Text Color will set the color of the event background and text color respectively.
  6. ‘Select First day’ will choose which day will be displayed 1st in the calendar. Value of Sunday will be 0 and that of Monday will be 1. Rest of the days will follow.
  7. ‘Initial View’ will set the view as day/ week/ month when the page is loaded.
  8. On click events can be added to the calendar events.

Month View:

Week View:

Day View:

1 Like