twinssbc / Ionic-Calendar

A calendar directive for Ionic framework
http://twinssbc.github.io/Ionic-Calendar/demo
MIT License
159 stars 73 forks source link

How to add multiple color for multiple events #134

Closed vinitmishraji closed 7 years ago

vinitmishraji commented 7 years ago

var i = 1; var j = 1; var p = 1; var f = 1; scope.getHighlightClass = function (date) {

                        var className;

// if(date.hasEvent)alert(date.date); //Satrt By Vinit if (date.hasEvent) { // alert("YES" + i + j) if (i && j) { className = 'monthview-primary-with-event-2'; p = 0; f = 1; } if (!i && !j) { className = 'monthview-primary-with-event'; f = 0; p = 1; }

                        } else
                        {
                            if (p) {
                                i = j = 1;
                            }
                            if (f)
                                i = j = 0;

// alert("NO" + i + j) } //End By Vinit

}

Its working for me but when i slide month-title now showing updated moth name

vinitmishraji commented 7 years ago

SOLUTION 👍 <tr ng-repeat=\"row in [0,1,2,3,4,5]\">\n" + " <td ng-repeat=\"col in [0,1,2,3,4,5,6]\" id=\"{{view.dates[row7+col].date.getTime()}}\" ng-clickVinit=\"select(view.dates[row7+col])\"\n" + " ng-class=\"getHighlightClass(view.dates[row7+col],view.dates[row7+col].date)\" ng-include=\"::displayEventTemplateUrl\">\n" + " \n" + "

This is regarding female period tracker... JS: var i = 1; // Loop 1st var j = 1; //Loop 1st var p = 1; //Variable for Period date color var f = 1; //Variable for Fertility date color scope.getHighlightClass = function (date, colDate) {

// alert(date.date.getTime()); // alert(colDate.getTime()); var className;

// if(date.hasEvent)alert(date.date); //Satrt By Vinit if (date.hasEvent) { // alert("YES" + i + j) if (i && j) { className = 'monthview-primary-with-event'; p = 0; f = 1; $("#" + date.date.getTime()).css("background-color", "#e80e8a"); $("#" + date.date.getTime()).css("color", "white"); // $("#" + date.date.getTime()).css("border", "1px solid #f6921e");

                            }
                            if (!i && !j) {
                                className = 'monthview-primary-with-event';
                                $("#" + date.date.getTime()).css("background-color", "#f6921e");
                                $("#" + date.date.getTime()).css("color", "white");

// $("#" + date.date.getTime()).css("border", "#2a3944"); f = 0; p = 1; }

                        } else
                        {
                            if (p) {
                                i = j = 1;
                            }
                            if (f)
                                i = j = 0;

// alert("NO" + i + j) }

}