How to add Ajax to the default widget calendar to support next/previous months loading?

Question

I want to customize or replace the default calendar, similar to the default widget, but with Ajax next and previous months loading.

Ideally I would like to be able to do that (red dots are dates with posts):

The left and right parts are preview of next and previous months. But that will be a bit hard to do. Just a simple WordPress calendar with Ajax next/previous and link to days containing posts will be enough.

Maybe there is a way (a trick ?) to add Ajax months loading on the default calendar widget. The default one is simple and perfect, but this feature is missing.

How could I do that?

Answer 1

Interesting task indeed. Here's what I would do:

1. Create my own plugin with a widget. You can always use plugin boilerplate or widget boilerplate as starting points.
2. My widget would look like the default calendar, except it would also have the 'prev'/'next' links, as you mentioned.
3. I would then copy-paste and adjust the get_calendar() function located in wp-includes/general-template.php, which is responsible for populating the calendar HTML. I'd call it something nice and unique, like my_get_calendar().
4. Connect my widget with my function via AJAX calls triggered by clicks on 'prev'/'next' links, passing month and year as parameters. The my_get_calendar() function would catch those and return either JSON or HTML (depending on where you prefer the markup generation to occur - either in the front-end or back-end).
5. In my widget's JS on document.ready I would call my back-end function to initially populate the calendar, and then attach click handlers to 'prev'/'next' links.
6. Share end result with the world by either posting it on GitHub or in WordPress plugins repository, or both.