Fullcalendar - how to change from Month View to Day View when user clicks on a day

Fullcalendar - how to change from Month View to Day View when user clicks on a day

  

Outsystems platform 9.0.1.75 our environment is on-premise.

Good day,

I would like to ask for your assistance, I am currently involved an a appointments project for a hospital whereby users are going to be making appointments with a GP and for this we are going to be using a Full-calendar widget.  In our application we have a full-calendar widget, the requirements are that whenever a user clicks on a particular day in the month view the user should be redirected to the day view of that particular day the user clicked on.

Refer to the below screen shots for what I would like to achieve.

 1.Initial view when the application loads.

2.Required view to be displayed when the user clicks on a particular day in the Month View.


3.Screen Action


 

Kindly note that I have tried to use JavaScript to achieve this requirement but with no luck.

Your feedback and assistance will be highly appreciated.

Warm Regards

Dumisani

Okej,

I can help you with this.
There is a way how you can achieve this using the input parameters of the widget and an ajax refresh.
In the following screenshot you see there is an input parameter "ViewsJSON" with :

"defaultView:'agendaWeek'"

As well as an inputParameter : "DefaultDate"


NOTE: I have extra input parameters, since i extended the component with external drop events and more flexibility around click, drag, select events. So don't bother for those ones.

What you could do is manipulate those parameter. Use a text variable (for viewsJSON ) with as defaultvalue: "defaultView:'month'" or whatever yourdefault view is.
Whenever you receive the callback from a click event on a specific day, change that variable value to: "defaultView: 'agendaDay".

Same for the defaultDate input parameter, use a variable with a default date. Whenever your click callback occurs, change that variable's date to the one you clicked on the calendar.

Last step, just ajax refresh the calendar control:)


Try it out!

Greetings,

Niels



Niels Favreau wrote:

Okej,

I can help you with this.
There is a way how you can achieve this using the input parameters of the widget and an ajax refresh.
In the following screenshot you see there is an input parameter "ViewsJSON" with :

"defaultView:'agendaWeek'"

As well as an inputParameter : "DefaultDate"


NOTE: I have extra input parameters, since i extended the component with external drop events and more flexibility around click, drag, select events. So don't bother for those ones.

What you could do is manipulate those parameter. Use a text variable (for viewsJSON ) with as defaultvalue: "defaultView:'month'" or whatever yourdefault view is.
Whenever you receive the callback from a click event on a specific day, change that variable value to: "defaultView: 'agendaDay".

Same for the defaultDate input parameter, use a variable with a default date. Whenever your click callback occurs, change that variable's date to the one you clicked on the calendar.

Last step, just ajax refresh the calendar control:)


Try it out!

Greetings,

Niels



Hi Niels,


Thanks a lot for your response, my colleague and I managed to find a workaround to archiving the desired result thanks to your response the issue has been resolved.

Much appreciated.

Warm Regards

Dumi