Working of calendar under bootstrap and angularjs

I am currently working on a calendar, a jQuery calendar. I will explain what I want to achieve. okay the scenario is, we have a company management system, in which there is the provision to add the holidays for the companies. There is a form provided to take input for holiday name, holiday reason and of course start and end date for holiday(We have used inline calendars to do this, and obviously this is not done by me). Now, We have a master calendar where,

1. I want to show holiday dates with different background
2. There is a provision in the plugin to select next or previous month, I want to capture that date whenever the user selects that and want show the holidays for that month and the year (I know I will need AJAX for that but the problem in I am unable to get the value from the calendar)

We have used jQuery calendar, and angularjs. I don't find a way to do it. I am posting question here because I mainly work at server side and I rarely work at UI side, I don't have in depth knowledge of it.Thank you if anyone can help me in getting rid of this problem. I am posting a code snippet where our UI designer have placed the calendar and a snapshot of the master calendar.

<div class="box-body no-padding">
   <!--The calendar -->
   <div id="calendar" style="width: 100%">
   </div>
</div>