Has anyone used Datatables to render a Calendar?

Has anyone used Datatables to render a Calendar?

GstgGstg Posts: 65Questions: 4Answers: 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: 19,470Questions: 26Answers: 4,612

    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: 65Questions: 4Answers: 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: 19,470Questions: 26Answers: 4,612

    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: 19,470Questions: 26Answers: 4,612

    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: 568Questions: 136Answers: 5

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

  • montoyammontoyam Posts: 568Questions: 136Answers: 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: 65Questions: 4Answers: 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: 60,307Questions: 1Answers: 9,792 Site admin

    That is an epic example Kevin - nice one!

  • subscriptionmsubscriptionm Posts: 1Questions: 0Answers: 0
    edited September 2022

    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.

Sign In or Register to comment.