Recently, I've started exploring Angular and I'm trying to incorporate a calendar feature using ui-calendar. So far, I've managed to display a basic calendar with some events on it.
Now, my goal is to allow users to click on a specific day and see detailed events in a side tab. However, I'm struggling to figure out how to make the day clickable. My initial thought was to find the HTML template for each day cell on the calendar and attach an ng-click directive to it. Unfortunately, I haven't been able to locate the template as all I can see is the directive without much information. Since I have limited knowledge of jQuery, finding a solution has become even more challenging.
In essence, I simply want to understand how to enable clicking on a day in the calendar.
Thank you in advance.
Code:
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: function(date, jsEvent, view) {
console.log("inside dayClick");
alert('Clicked on: ' + date.format());
var events = myCalendar.fullCalendar('clientEvents', function(event) {
return event.start.isSame(date) || event.end.isSame(date) || date.isBetween(event.start, event.end);
});
}
}
};