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

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

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

1 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 () {

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


  • How hard is it for users to make custom calendar views using a javascript calendar?
    – zingwing
    May 26, 2015 at 19:24
  • There are two ways to go about that 1) You can just create a custom view in SharePoint through the front-end and then use that view that you've created (by name) when you make the service call. 2) You can make a full call to the service and then filter the data via JavaScript. #1 is smarter since it's less code and it can be changed on the fly without having to touch script. It's also faster since it's done centrally. #2 is better if you want to do some dynamic filtering (javascript buttons, things not listed in the view creation page, etc)
    – Graham
    May 26, 2015 at 19:40
  • not had to create a custom calendar using javascript. see: sharepoint.stackexchange.com/questions/142735/… May 27, 2015 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.