How to do reactive FullCalander  ediatble and use diffrent color code for dates
Application Type
Reactive

Hi Outsystems Experts,


I am trying to implenet the fullcalander2 in reactive but i want make this calander editable where i can rediect into screen where i am booking the slots also in calander how i can diffreantitate the color for future past and current date.

Please help me 

Demo.oml

mvp_badge
MVP

Hi Soni,

Please find the below solutions against the mentioned queries..

Q1 How i can differentiate the color for future past and current date?

Solution

1) Add a custom class to a container called custom-calendar, which encapsulates the calendar widget 

2) Define the below CSS definition in the respective screen style sheet section

.custom-calendar .fc-day.fc-past {
    background: #bcf5bc;
}

.custom-calendar .fc-day.fc-future {
    background: #ffcccb;
}


Q2: Rediect into screen where i am booking the slots?

Sorry, I didn't understood the question completely, would suggest you to modify the respective event handler flow as per your requirement.


Refer the attached update .oml file

Hope this helps you!


kind Regards,

Benjith Sam

Demo.oml

Hi Benjith Sam 

Really i am gald that someone answered on this topic! Thanks so much for your help.i was  stuggling with this compont and i am very new in OS. thanks Again :) 

my one problem you has solved for color code but seocnd question what i had

while clicking on the calander to update the events 's slots  i want to redirect into screen3 from screen4 

steps- 

first screen is screen3 where i am creating the event and screen 4 to view the slots but while clicking on the calander to make as editable in save button i am passing calander as editable but i want o redierct it in screen3 but its shwoing the error while clciking on it please find the screnshort below






Error i am getting for


In table URl has saved like this

please see URl colum not sure weather its correct or not please see the screenshort 



Also  i Tried to give hard code URl but stil its not working

"https://soni-rawat.outsystemscloud.com/Demo/Screen3.aspx?CalendarEventId="+CreateCalendarEvent.Id
https://soni-rawat.outsystemscloud.com/Demo/Screen3.aspx?CalendarEventId=70

was trying to check in browser but its not working 

I have attached Oml 

COuld you please check 

DemoUpdated.oml

mvp_badge
MVP

Hi Soni,

Modern OutSystems applications are built as Reactive Single Page Applications. The underlying screen building technology is no longer ASP.net but ReactJS. 

So..

- The web page/screen created under Traditional web application category does have an .aspx extension included in the screen Url

- The web page/screen created under Reactive Web application category does not have any extension


Solution: 

Instead of using/binding the calendar event URL property value with .aspx extension

https://soni-rawat.outsystemscloud.com/Demo/Screen3.aspx?CalendarEventId=70

You should use/refer URL with no extension i.e. only screen name along with input parameter

https://soni-rawat.outsystemscloud.com/Demo/Screen3?CalendarEventId=70


Hope this helps you!


Kind regards,

Benjith Sam

Hi 

Benjith Sam  Thanks for your help :) 

also  i am facing some issue need your help

1) you shared the css for past dates and future dates if i want to show the colors only if i had slots or only for future dates if we have slots than how we can achieve this.

2) I am using api to fetch the data based on login user for whom slots has booked but in table there is respective id but while in fetch i am getting slots or events details for all

NewEventSourceUrl("/Demo/rest/RESTAPI2/RESTAPIMethod1/id?="+GetUserId(),EventSourceList:,Id:,Color:,BackgroundColor:,BorderColor:,TextColor:,ClassName:,Editable:,StartEditable:,DurationEditable:,ResourceEditable:,Rendering:,Overlap:,Constraint:,AllDayDefault:)


If i dont give id its returns all the event but i need the event details based on user id but i am facing the issue 

I have attached the OMl could you please give expert advise what is wrong in this i am struggling in this from past month  Please help me achive this as well 

Thanks in Advance 

Demo.oml

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