thanks for a quick response: actually my use-case is quite simple and my events are quite controlled in the sense not more than 2 weeks form Today going forward and past events dont really matter.

So what I really want is to set a limit of events per day and when that limit is hit the background color of the day changes to indicate that the calendar for that day is full, hope that make sense ?

Yeah, thats sound like a good, good thing the events creation is being handled elsewhere not on the calendar, is calendar is purely for displaying.....

User will fist need to check on the calendar to see if there is a free day, so i am guessing the only server side check is if the events count limit has been hit or not ?

right ?

Sure thanks man !! will give it a shot 

hay Man kinda got stuck, this is my calndar rendering code 

$(document).ready(function() {
  return $("#calendar").fullCalendar({
    header: {
      left: 'title',
      center: 'agendaDay,agendaWeek,month',
      right: 'today prev,next',
    },
    weekends: false,
    events: '/leave_events.json',
    dayRender: function( date, cell ) {
      if (moment().diff(date,'days') > 0){
        cell.css("background-color", "silver");
      }
    }
  });
});

and here is my json object builder

json.array!(@leave_events) do |leave_event|
  json.extract! leave_event, :id, :user_id, :team_id
  json.start leave_event.start_time
  json.end leave_event.end_time
end

still cant extract the count of events per day ... any tips 

the thing thats troubling me now is how to pass the date in to the scope in the jbuilder without hardcoding it 

json.array!(@leave_events) do |leave_event|
  json.extract! leave_event, :id, :user_id, :team_id
  json.start leave_event.start_time
  json.end leave_event.end_time
  json.events_on_date LeaveEvent.events_on_date(date) // this line is where I can figure out stuff 
  json.max_allowable_leave leave_event.team.max_allowable_leave
end

see the rest of `calendar.js`

$(document).ready(function() {
  return $("#calendar").fullCalendar({
    header: {
      left: 'title',
      center: 'agendaDay,agendaWeek,month',
      right: 'today prev,next',
    },
    weekends: false,
    events: '/leave_events.json',
    eventLimit: 1,
    dayRender: function( date, cell ) {
      var events_on_date = ;
      $.getJSON('leave_events.json', function(json) {
        for (var i = 0; i < json.length; i++) {
          console.log(events_on_date);
          if (events_on_date > json[0].max_allowable_leave){
            cell.css("background-color", "red");
          }
        }
      });
      if (moment().diff(date,'days') > 0){
        cell.css("background-color", "silver");
      }
    }
  });
});