javascriptangularjstwitter-bootstrapangularjs-ng-clickui-calendar

selecting a day from UICalendar


I am fairly new to angular I am trying to implement a calendar using ui-calendar. So far I have been able to display a very basic calendar and some events on it.

Now I need to be able to click on a day and display the detailed events on a side tab. I seem to be lost on how to achieve this clicking day thing. This may seems very naive, I thought i'd find the html for each day cell on the calendar, and then it would be as easy as attaching a ng-click to it. But I cant seem to find any template where the html for calendar is. All I can see is the directive, which doesnt help much. I dont understand jquery at all, so I am really struggling to find any answers too.

To sum things up, I just want to know how to make a day on calendar clickable.

Thanks 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); // Will return all events starting/ending on this date or overlapping this date
      });
    }
  }
};

Solution

  • In your configuration variable you can add a dayClick callback , in this callback you can do something like this:

    dayClick: function( date, jsEvent, view ) { 
        var events = myCalendar.fullCalendar('clientEvents', function(event) {
            return event.start.isSame(date) || event.end.isSame(date) || date.isBetween(event.start, event.end); // Will return all events starting/ending on this date or overlapping this date
        });
    }
    

    This will return all the events that either are on this day or overlap it.

    FullCalendar docs can be found here.