Has anyone used Datatables to render a Calendar?

Has anyone used Datatables to render a Calendar?

GstgGstg Posts: 44Questions: 0Answers: 0

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-)


  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322

    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.

    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.


  • GstgGstg Posts: 44Questions: 0Answers: 0

    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;


    or this;



    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.


  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322

    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:

    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.


  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322

    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.


  • montoyammontoyam Posts: 517Questions: 125Answers: 5

    that is awesome. I need to bookmark this example :smile:

  • montoyammontoyam Posts: 517Questions: 125Answers: 5

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

  • GstgGstg Posts: 44Questions: 0Answers: 0

    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

  • allanallan Posts: 54,880Questions: 1Answers: 8,601 Site admin

    That is an epic example Kevin - nice one!

Sign In or Register to comment.