38
Views
7
Comments
Solved
[FullCalendar Reactive] Header Click
fullcalendar-reactive
Reactive icon
Forge asset by Mediaweb
Application Type
Reactive

In the week calendar view: If i click the day in the header, i want to perform the one client actions.



Thanks

2020-12-07 13-36-58
Alexandre Santos
Champion
Solution

I'm giving you an example in this code pen:

https://codepen.io/alexandre_santos/pen/QWPNBeV?editors=0010


What you will need to do is to use this code on the AdvancedOptions parameter of the full Calendar block.

JS Code:

OutSystems:


You can check the Demo provided with Full Calendar if you have questions about how to use this parameter.


Cheers!

2019-12-16 14-44-15
Rúben Santos

Hello @Palaniraja Paraman,

Please let me know if I've understood correctly—you're seeking the capability to click on any of the weekdays in the header and trigger a client action. Unfortunately, I was not able to achieve this through FullCalendar. Consequently, I've devised an example using only JavaScript to fulfil this requirement.

Feel free to experiment with it, and don't hesitate to reach out if you have any questions.

FullCalendarHeader.oml
2025-03-26 05-54-25
Palaniraja Paraman

Thanks for your answer!! It's getting the text but I want the date instead of the text. Let's say If I click Monday as per your code I will get mon but I want 2024-03-11.


Thanks in advance

2019-12-16 14-44-15
Rúben Santos


Hello,

Updated the example, now returns both the week day and the date.

FullCalendarHeaderUpdated.oml
2020-12-07 13-36-58
Alexandre Santos
Champion

Hi @Palaniraja Paraman 


You ended up creating two posts for the same thing, I don't know if you can close one of them so that we keep answers only on one thread.


Regarding you question, by default Full Calendar doesn't have that option. 

But since you want to select days, would you consider this option? : https://fullcalendar.io/docs/v5/date-nav-links


If this is not okay, can you provide more context of what you are trying to achieve?


Cheers!

2025-03-26 05-54-25
Palaniraja Paraman

Thanks for your reply!! Exactly I need what you said but I don't know how to achieve it. Sorry for the confusion. Surely, I mark this as a solution.


Thanks in advance

2020-12-07 13-36-58
Alexandre Santos
Champion
Solution

I'm giving you an example in this code pen:

https://codepen.io/alexandre_santos/pen/QWPNBeV?editors=0010


What you will need to do is to use this code on the AdvancedOptions parameter of the full Calendar block.

JS Code:

OutSystems:


You can check the Demo provided with Full Calendar if you have questions about how to use this parameter.


Cheers!

UserImage.jpg
Nalani Roberson

Thank you so much for the suggestions.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.