Robin Robin - 1 year ago 135
AngularJS Question

eventClick in angular-ui-Calendar is not working

The UI works fine, the events are displayed correctly, but the only problem is

isn't working. I thought jQuery needs to be updated to solve this issue, but I was wrong. There is something else which is preventing the
from working! Please Help

This is my index.html

<div class="container">
<div ui-calendar='$ctrl.uiConfig.calendar' ng-model="$ctrl.eventSources">

this is my controller.js


class CalendarComponent {
constructor() {

this.eventSources = [];

this.uiConfig = {
calendar : {
editable : true,
header : {
left : 'prev,next,today',
center : 'title',
right : 'month,agendaWeek,agendaDay'

eventClick: function(event,jsEvent,view){

this.eventSources = [

events: [
{title: "finger painting", start: "2016-07-28T18:00+05:30", location: "SAC middle earth", allDay:false},
{title: "hand painting", start: "2016-07-27T21:30+05:30",location: "CLT", allDay:false}

color: "red"

events: [
{title: "lightmusic", start: "2016-07-29T18:00+05:30", location: "OAT", allDay:false},
{title: "Rock music", start: "2016-07-28T21:30+05:30",location: "SAC middle earth", allDay:false}


color: "blue"




.component('calendar', {
templateUrl: 'app/calendar/calendar.html',
controller: CalendarComponent


Answer Source

Try passing the uiConfig object to the ui-calendar, right now the eventClick isn't inside of the object that you're passing to that directive

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download