Fullcalendar and Ionic

ionic-v1
1

I Have implemented fullcalendar in my Ionic project. Now, I would like to change the color of a TD by clicking on it. This is to indicate which day is selected(clicked).

I know jQuery and I found a little script that does this:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(".fc-state-highlight").removeClass("fc-state-highlight");
        $(jsEvent.currentTarget).addClass("fc-state-highlight");
    }
});

But in my ionic project, there isn’t used any jQuery. So instead of ‘$(“selector”).fullcalendar’ I use:

$scope.dayClick = function(date, allDay, jsEvent, views){
        $scope.$apply(function(){
          //I would like to do the same as code above
        });
    };

So, for instance, with the second piece of code I would like to make the clicked day, red. And all other days have their own ‘normal’ class.

Thanks in advance,

Jan

2

Can anyone help please?

3

Check out this post: http://stackoverflow.com/questions/20460369/adding-and-removing-classes-in-angularjs-using-ng-click
I believe it should answer your question…

4

I did this for you… hope it helps…

http://jsfiddle.net/0L4ecyhk/32/

5

Hello,

Not quite… I see what you did there, I use this on other views in my app. But in combination with ‘fullcalendar’ it seems a bit different. There is just one line in my HTML code:

<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>

Every spot (number) on the calendar has its own data value, generated by JavaScript. To change the ‘selectedDate’ to the clicked day, the following code is used:

$scope.dayClick = function(date, allDay, jsEvent, views){
    $scope.$apply(function(){
      $scope.selectedDate = $filter('date')(new Date(date));
    });
};
 
/* config object */
$scope.uiConfig = {
  calendar:{
    aspectRatio: 1,
    editable: false,
    firstDay: 1,
    header:{
      left: 'prev',
      center: 'title',
      right: 'next'
    },
    dayClick: $scope.dayClick,
    dayNames:['Sunday', 'Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    dayNamesShort: ['S', 'M','T', 'W', 'T', 'F', 'S']
  }    
};

In the function ‘DayClick’ should be something to add the class…

6

Can anyone help please?

Thanks,

Jan

7

hello
this post shows how to add a class to an element
hope it hepls a bit