Has anyone used Datatables to render a Calendar?

Gstg

Wondering if anyone has utilized DataTables to render a Calendar filling in the events tables based on the search results?

This would be utilized with the base DataTables search and Search Builder, but the resulting records would format in a sorted by date calendar.

Allan was amazingly helpful in creating a graphic table as opposed to a text based table, now we are looking to do a a social calendar version as well.

Thanks in advance for the amazing support that this forum and the administrators have done 8-)

kthorngren

Sounds like an interesting use of Datatables. I don't remember seeing anyone post a Calendar solution. This page has a tutorial for creating a calendar using Javascript. I adapted it to use Datatables API's to show one month.
http://live.datatables.net/kemeporo/1/edit

Its a very basic example that has a lot of potential to make it a full fledge calendar app. Hope this gives you a basis to start from.

Kevin

Gstg

Wow, very interesting application. Thank you for that.

But what I'm trying to do is we have events listed in a mySql database that has event_id, date_start, date_end, time_start, time_end, event_name. What we are looking to do is put them on a calendar format.

So it would show something like this;

https://www.php-calendar.org/php-calendar/index.php?phpcid=1&action=display_month&year=2021&month=9&day=15

or this;

https://code-boxx.com/simple-php-calendar-events/

https://datatables.net/forums/uploads/editor/aw/s996rkavlvxd.png

But utilize the DataTables components, like search, search builder, etc.

The idea is to utilize DataTables to filter the data going into filling in the events on the calendar.

We could then utilize the DataTables Editor to create new events on the fly as well.

Thoughts?

kthorngren

It would take a bit of work but doable. You could use CSS to format the cells to look more calendar like. I updated the example to show, again very simplistically, one way to add events to the calendar:
http://live.datatables.net/kemeporo/3/edit

This method assumes the events are fetched via ajax, for example, and stored in a global variable. You could use an input to select the month, fetch the events for the month, store in the variable and update the table with the months days. Then use rowCallback to process each row and extract the daily events from the global variable. Notice the events are searchable.

You could make the events clickable and pull up a form with the other data. You could span the events across multiple days. You can add new events, push to the DB via ajax and display in the table.

Its a matter of presenting a data structure to Datatables that can easily be processed and placed into rows.

This is only one example of how this could be done. You could return all the rows fully populated by day with any events then use `-option columns.render to format each day.

Kevin

kthorngren

You possibly could use the edit() API to bring up the form for the event and post it to the server.

I realized the the search may not work the way one would expect with a calendar. Instead you may want to use something like the page.jumpToData() or row().show() plugins to jump to the page with the searched data. SearchBuilder wouldn't work for this case. It will just filter the rows.

Kevin

montoyam

that is awesome. I need to bookmark this example

montoyam

I had done one where a week was a single record. then I used templates and standalone feature of DataTables to show 6 weeks

Gstg

That is some cool stuff. I was thinking about key searching by date if there would be an easy way to move forward or backwards in months or jump by year.

This is a fun start for sure. Thanks again

allan

That is an epic example Kevin - nice one!

subscriptionm

I have not personally used DataTables to render a calendar, but I have heard it can be done. I believe it would be a great way to fill in the events tables based on the search results. I think it would be a very efficient way to do things, and it would also be a lot less work for the person responsible for the calendar. If someone is searching for such a calendar, I can recommend using a 2023 blank calendar. It has many similar features that can fill the events tables based on the search results.

SuruIwant

I haven't personally used DataTables to render a calendar, but I must say it sounds like a fascinating approach!

Meetrypt

The idea of taking advantage of DataTables' search and sorting features to create a calendar with events sorted by date is quite innovative.

Meetrypt

I'm also glad to hear that you were provided with valuable assistance in creating a graphic table. Having such support can make a significant difference in your projects.
As you delve into the realm of a social calendar version, it's always helpful to explore different resources. I recently stumbled upon Calendar Geek at https://calendargeek.com/guide , which offers insights and guidance on various calendar-related projects. You might find some useful tips there.