Custom calendar colors when move forward or backwards in months

Question

I've been able to get custom colors working on my calendar, but when I go to previous month or next month the colors don't persist.

To attempt to remedy this I've tried making a click event to get the colors to load. Is there a way I can get the colors to load when I click the previous or next month buttons?

$(document).ready(function() {
   $('body').on('click'), '#WPQ2_nav_next_a', function(){
      calColors();
   });

   $('body').on('click'), '#WPQ2_nav_prev_a', function(){
      calColors();
   });
});// end doc ready

calColors = function () {
   //code to color calendar
}

Answer 1

The problem is that your CSS/JS/jQuery code will only run when the page is ready(), which happens once. When you navigate to another month, the color coding won't update. There is no easy solution if you want custom colors in SharePoint beyond those that you can set when you add a layer (a reference to a separate calendar).

I wrestled with this one myself, including writing a lot of custom code to try and update whenever the event fired around clicking the next/prev month button. Even the best code done this way has issues: Since it is done after something happens 1) it will 'blink' as the code is re-rendered in the new colors, 2) a small delay on the local script can cause it to not fire unless they press a button again and come back to the targeted month. IT WAS NOT WORTH THE TROUBLE AND HEADACHES.

What I would suggest (beyond writing nasty emails to Microsoft) is if you HAVE to go custom colors/appearance to look up one of the custom calendar apps out there on Google (search for 'javascript calendar' and plenty come up to varying degrees of professionalism) for free. Most involve something like a simple JSON code call to the SharePoint REST service. If you go that route, here's a simple JSON call using ajaxtoolkit.js

$ (document).ready(function () {

$.ajax({
  type: 'GET',
  headers: {
    'accept': 'application/json;odata=verbose'
  },
  url: "/_api/Web/Lists/Getbytitle('Tech20Process')/Items?$filter=Column1 eq 1&$select=Column1,IncidentStopTime&$orderby=IncidentStopTime desc&$top=1",
  success: function(data){
    document.getElementById("ColumnID").innerHTML  = moment(data.d.results[0].IncidentStopTime).fromNow(true);
    document.getElementById("ColumnID").show();
    document.getElementById("ColumnID").show();
  }
});

});