Grid style calendar

[rokit]

I love the calendar management tools in Wappler. I’ve checked it out and was able to quickly build a calendar using data however I need a view that shows all my employees (or a filtered group) listed down the left side and the days of the week across the top.

This way we can look at our week and see quickly who is NOT scheduled etc. Has anyone created such a calendar or is their a feature in the calendar view that I am missing?

[sbecks]

Hey @rokit

Scheduling is a paid feature of the Full Calendar plugin, though it's usable in full on a free trial:

Premium Plugins - Docs | FullCalendar

Because it's a paid version it's not available with the Wappler calendar component, but you can use javascript to do this:

How to use the Full Calendar Schedule?

OK… THIS… This is what i needed!!! Thank the gods Ok, so obviously this worked. Thanks @patrick. From the get go, FullCalender could always accept the PHP query, but it needed JUST the array data, and not any query names or anything. This worked… no parsing needed. For anyone interested, this is the simple Server Connect Query: [image] And this is the the JS file that calls the FullCalendar: [image]

This post pretty much has the code you need to get a working version linked to Wappler server connect data (you may need to modify alongside the full calendar docs to get exactly what you need).

Check this to initialise the basic calendar (without using the Wappler component):

Initialize with Script Tags - Docs | FullCalendar

Extended to this to add the resources view and data:

Timeline View - Docs | FullCalendar

I have it up and running and it works really well. It's a bit more trial and error to get there than with a built in option!

[rokit]

Thanks! I would absolutely pay for this functionality if I can demo it for the people in my office. I’ll set aside some time next week to give it a shot with our data!

[rokit]

Good morning @sbecks

apologies for my ignorance but i’m not sure where to start. Are we somehow extending the wappler integration or starting with a new calendar as a separate project and connecting it to the wappler server connect?

I’m really excited to give this a try but I’m not sure how to start.

[sbecks]

It may be possible to extend the Wappler integration, but I’d suggest it’s easier to try and do it using Javascript.

This is a demo codepen from the FullCalendar docs for the scheduler component:

Create a New Pen

Instead of using the Wappler component you’ll need to add the calendar in manually. This means adding the js and css scripts in the head. You can get them via cdn from the link below, or download them from the fullcalendar site:

fullcalendar-scheduler CDN by jsDelivr - A CDN for npm and GitHub

You’ll then need to add a calendar to your page:

<div id='calendar'></div>

and add Javascript (this is the JS for the Codepen above), if you change the id on the page make sure you change it in the Javascript:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
}); 
</script>

This should ‘work’ on your page with the data coming from the demo data feeds:
https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors
and
https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline

These links should give an idea of what the data source needs to look like.

To replace these with data from Wappler you can either:

Copy the full url of you server connect action, or

replace the url with

resources: dmx.parse('scAction.data.myresources'),
events: dmx.parse('scAction.data.myevents')

where the bit in brackets is a server action from your page. Make sure you add a response step like:

So no need for a separate project, and it’s using javascript instead of the Wappler component. It’s not something I’m great with myself but it’s worth persevering as it opens the door to being able to use lots of new things alongside Wappler.

I hope that helps a bit. Once you get your head round it you should be able to extend the functions of you calendar by changing the Javascript using the docs:
https://fullcalendar.io/docs
Most of the time there are code pens for each feature to give you a hand.

[rokit]

Rhanks so much, This will realy help me get started, I appreciate the detailed help it’ts very much appreciated. Can’t wait to give it a try.