Calendar Individual Event Colors

[Heather_Mann]

Hey Guys! Great work on getting FullCalendar implemented in Wappler! I already have FullCalendar fully functioning on my site, but am looking forward to integrating it the Wappler way.

My events all have categories, and each category has a color. I’ve tried to implement a dynamic color for the events but it doesn’t seem to be working…

Any hints where I might be going wrong? The color values are stored like #67c547 in the database. I tried removing the # but that didn’t work either.

Thanks again. Really exciting stuff!!
H.

[George]

Yes just make sure your calendar source is dynamic by enabling it and bind the right fields there.

[Heather_Mann]

The events are all showing up fine. It’s just that the backgrounds are all blue, rather than the dynamic background color drawn from the database.

[George]

How did you bind them? Could you share a screenshot of the bindings?

[Heather_Mann]

I did. It’s in the screen shot above.

[George]

you are using the wrong settings, please check the " Making the Event Calendar Dynamic" at Getting Started with App Connect Event Calendar

[Heather_Mann]

Hey George. Maybe you’re not understanding what I want to achieve. I don’t want every event from one data source to be the same color. I want each event to have the background color of it’s category which is sourced from the Server Connect field backgroundColor.

Here’s side by side what Wappler (left) and FullCalendar (right) look like…

I thought this, in the source dynamic attributes

Would be this in FullCalendar

[George]

I see what you mean. Currently we have indeed only those fields that are bind dynamically:

Will add the colors also on the next update so you can use custom ones per event. @patrick

[Heather_Mann]

Great. Thanks!!

[marsalstudios]

trying to do the same thing so glad it’s coming. Have you been able to add or edit events on the calendar. Not sure how to do that? Thanks

[Teodor]

Rick, as I already answered your question in the other topic, please check the docs explaining how to use dynamic events:

App Connect Calendar Dynamic Events

There are multiple dynamic events available in the App Connect Calendar such as - on date click, on event click, on event drop/move and on event resize. Each of the dynamic events returns specific data, based on what is it doing. In this tutorial we will show you the basics of using the dynamic events like accessing the clicked date or event id and using it as a value for other elements. Dynamic Events Overview You can access the dynamic events of the calendar, by selecting it and clicking …

[marsalstudios]

thanks. I see how date click and select work . Trying to understand drag/move works. How do you save the new values of the data after you do a drag/move? do you need to feed the event data into a model with an add form having a server connect action for the add record to the database? Sorry I’m not understanding quickly, but I see there is a lot there so this will be very useful.

Thanks again,
Rick

[Teodor]

This is already in the docs Rick...

Getting Started with App Connect Event Calendar

App Connect Event Calendar is a full-sized event calendar with drag & drop support and lots of customization options. It allows you to add static events or use different data sources for dynamic events. Getting Started with the Event Calendar We’ll go through the basics of adding the calendar on the page, customizing it and adding static events. Adding App Connect Event Calendar on Your Page Click the add new element button: [Screenshot_1] Open Components and select Calendar: [Screensh…

[marsalstudios]

yes i see how to add an event in the development code but what about the end user wanting to add an event while viewing the calendar. That is what I’m trying to do; set up the calendar page so that the end user can add/edit events directly. This is not clear from the docs. I can certainly see how a read only calendar can work.

Sorry,
Rick

[Teodor]

Rick, have you checked BOTH the docs links i sent you?
They explain how to access the specific data per dynamic event (drag, click, move, select date etc…)
Use them to allow your users edit the events.

And you know how to access the specific data per event you can do pretty mu everything with it …

[marsalstudios]

thanks I didn’t see that section. I got it to work with dates but when I try to use date picker with time picker, it gets confused. The date picker defaults to a text input box with the picker, but when I try to select a date through the picker, nothing gets put in the text input box. When I enter a format, it doesn’t work either. I’m trying to use format YYYY-MM-dd HH:mm Silly, but its the date/time formatting I’m stuck with.

[Teodor]

I’m not sure I understand you.
What exactly are you trying to do? And how?
Are you using the event calendar or the datepicker?

[marsalstudios]

I’m adding a new event to the calendar. What I have is a modal which appears when you select a date. The modal has a form to add a new event.
There is a timein and timeout text input which has a date picker with both. When I select a date, the value does not appear in the boxes so can’t save the new record. If the date boxes are just plain dates, no times, it works. the link is:

https://www.marsalstudios.com/admin/calendar/test_calendar.php

just select a blank date to see the modal. If you select one of the blue events, you’ll see a nicer modal with data about that event using the event click option and my database. The green events are from my external calendar, as another source which has categories in it but haven’t integrated that yet. Making progress, slow but steady. I do like where this is going. Just need some help with date formatting.