Calendar/Schedule

There was actually a DMX events calendar as a DW extension very back then. Actually now as I am writting this I remember I did create a page which was full of old school DMXzone tools and it actually still exists!

You can see the events calendar at the right (but it does not have any events assigned). You had the option to give several colors to the evens so it is easier to categorize them.

With a tear falling form my left eye I pass you the link
http://nrre.cperi.certh.gr/index.php?lang=en

4 Likes

Would be so nice to see an updated version of this Extension.

:slight_smile:

Maybe we can wait for server side API .btw we can use google calendar when it will be ready .
I was use to fullcalendar.io its working very well with wappler.

But of course included calendar extension idea is good :+1:

4 Likes

how does it integrate fullcallendar with wappler?

There is no direct integration built in to Wappler for Fullcalendar, as in there are no components (but it is well documented and StackOverflow is full of resources).

Hello @Dave , @alsdigital

you can use fullcalendar.io with wappler !!!

Simple Table Structure For Fullcalendar

then use ondone event on your server connect action

<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/a/takvim.php" ondone="calendarStart()"></dmx-serverconnect>

 <script>
    function calendarStart() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2019-06-29',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: dmx.parse('serverconnect1.data.query1')
    });
    calendar.render();
    }
</script>

Result

5 Likes

If you want to use DATETIME field type in your database ;

 <script>
    function calendarStart() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2019-06-29',
      timeZone: 'local',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: dmx.parse('serverconnect1.data.query1')
    });
    calendar.render();
    }
</script>

Result

5 Likes

Hi, can you please do a video tutorial? Im not so good with code, and i really need this for a project. Thnks in advance.

1 Like

hello @Max_Saravia, welcome to wappler
of course but I need to spare time . but this is really simple.
my first suggestion is read wappler documents if you dont read them .

I will create video tutorial end of this week. but you can try without video tuts. we are here and we can help to you always

1 Like

The basic implementation of Fullcalender is very simple but if you want to use features such as drag a date range to a new date range you will need to customise. Likewise for on hover, or click events, related to the events themselves. Basic insert, update, and delete can all be done outside of Fullcalender and inside of Wappler, but again if you wish to select a date range and add an event you will have to make some customisations. Likewise for clicking an event. You will have to pass the event id on click etc. All documented and not too difficult to do. Just a heads-up, so you don’t expect anything you were hoping for in that regard to work out of the box so to speak…

2 Likes

I have followed the above, the query returns results but they just do not show on the calendar…any ideas??

Hello @gunnery ,
please check your datetime field…

<script>
    function calendarStart() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2019-06-29',
      timeZone: 'local',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: dmx.parse('serverconnect1.data.query1')
    });
    calendar.render();
    }
</script>

Hi checked my date & times (they are all good and retuning:
“title”: “Test”,
“start”: “2019-10-23 10:00:00”,
“end”: “2019-10-23 17:00:00”

and I’m still getting this issue, been driving me mad. I just can’t see what’s going wrong.
I’ve also added the dmx-serverconnect id=“serverconnect1” url="…/…/dmxConnect/api/New-Database/members/ClubShoots/view_dates.php" dmx-on:done=“calendarStart()”></dmx-serverconnect
But with just the above the calendar does not show.
If I add “document.addEventListener(‘DOMContentLoaded’, function calendarStart()”
then the calendar shows up the the dates still do not show.

Any ideas this is driving me mad and I’ve got to integrate it into a project.

dmx-on:done try ondone

dmx-serverconnect id=“serverconnect1” url="…/…/dmxConnect/api/New-Database/members/ClubShoots/view_dates.php" dmx-on:ondone=“calendarStart()”></dmx-serverconnect

Still the same issue buddy it does not show the calendar at all just a blank page

dmx-serverconnect id=“serverconnect1” url="…/…/dmxConnect/api/New-Database/members/ClubShoots/view_dates.php" ondone=“calendarStart()”></dmx-serverconnect

BINGO, that worked…thank you very much :slight_smile:

1 Like

:slight_smile:

Now Ive just got to work out how to get it to click an event so I can show more information :wink:

1 Like

@gunnery

Add an on eventClick something like:

eventClick: function(calEvent, jsEvent, view) {
 window.location = "eventInfo.php?evntuid=" + calEvent.evntUID;
  },

‘evntUID’ being whatever field you are defining as an ID. Usually just id, but makes it easy to inject to the URL if too simple…

Or use a cookie and pop open a modal:

eventClick: function ( calEvent, jsEvent ) {
        $ . cookie2 = function ( key, value, options ) {
            if ( typeof value != 'undefined' ) { // setting cookie
                var defaults = {
                    expires: 1,
                    secure: 1,
                    path: '/'
                };
        $('#MODALID').modal();
        $( '.tooltipevent' ) . remove();
                $ . extend( defaults, options || {} );
                return $ . cookie( key, value, defaults );
            }
            // getting cookie
            return $ . cookie( key, value, options );
        };
        $ . cookie2( 'selectedeventuid', calEvent . evntUID, {
        } );
    },

You can pretty much use any javascript based event in Fullcalendar…

:wink: