How can we implement Calendar view with details for current day, current week and month data in a single view.
Also, it should be show a marker against the current date & time.
7 Likes
The expected view is kind of similar to what is in a google calendar
2 Likes
Yes, you can achieve this through FullCalendar component in vFlow. Its somewhere like a Google calendar, you can see a marker against the current date and time , and also the events are visible in this.
You can just go to Components section in vFlow and click Add Components.
there you find FULLCALENDAR option in the dropdown.
- Select the Full calendar component from the list.
- Enter basic details, UI properties, add datasource and submit the component.
- The datasource must be in the format mentioned below for the events:
[ { “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” } ]
- Go to Additional Properties, and set the desired properties.
-
‘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.
-
‘Show Calendar View Buttons’ when checked, will show the day, week and month buttons.
-
‘Show Indicator’ checkbox when checked, shows a red indicator on current time.
-
‘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.
-
‘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.
-
‘Initial View’ will set the view as day/ week/ month when the page is loaded.
I have used this Component in one of my Project (GSD HDFC Life)
Some screenshots are attached below -
Day View
Week view
Month View
32 Likes
You can also add Custom CSS to make the calendar more Representative.
27 Likes
Yes, you can achieve this through FullCalendar component in vFlow. you can use a marker against the current date and time , and also the events are visible in this.
You can just go to Components section in vFlow and click Add Components.
there you find FULLCALENDAR option in the dropdown
Select the Full calendar component from the list.
Enter basic details, UI properties, add datasource and submit the component.
The datasource must be in the format mentioned below for the events(array of objects):
[ { “series”: “a”, “name”: “full-day”, “start”: “2023-03-06” },
{ “series”: “b”, “name”: “half-day”, “start”: “2023-02-11T11:00:00” },
{ “series”: “c”, “name”: “leave”, “start”: “2023-07-14T17:00:00”, “end”: “2022-07-14T18:00:00” } ]
then Go to Additional Properties, and set the desired properties.
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.
Show Calendar View Buttons when checked, will show the day, week and month buttons.
Show Indicator checkbox when checked, shows a red indicator on current time.
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.
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.
Initial View will set the view as day/ week/ month when the page is loaded.
2 Likes