1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to change the color of the event dynamically from popup

How to change the color of the event dynamically from popup

Hi!

I want to change the color of the clicked event from the related popup. For example, I have a red event, I click on that and see the popup with some description and a button where if I click that... the event color changes from red to green. Is it possible to do that?



Thanks, regards!


10 Replies 1 reply marked as answer
DA Daniel December 20, 2020 06:50 PM UTC

Also, when I click on that button to change the color of the event... I want to update some values of the object data related to that event. This is to avoid to reload all the collection with the new values of that event.

Thanks again, regards!

RV Ravikumar Venkatesan Syncfusion Team December 21, 2020 10:30 AM UTC

Hi Daniel, 

Greetings from Syncfusion support. 

We have validated your requirement at our end and achieved your requirement with the help of the QuickInfoTemplate method and PopupOpen event of the Schedule as shown in the below code and for that, we have prepared a sample for your reference which can be downloaded from the following link. When updating the Schedule event all the events are re-rendered which is the default behavior of our Schedule to prevent the events from overlapping. 


[Index.cshtml] 
<div class="control-section"> 
    <div class="content-wrapper"> 
        @Html.EJS().Schedule("schedule").Width("100%").Height("650px").QuickInfoTemplates(new ScheduleQuickInfoTemplates { Header = "#header-template", Content = "#content-template", Footer = "#footer-template" }).PopupOpen("OnPopupOpen").EventRendered("onEventRendered").EventSettings(e => e.DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2018, 2, 15)).Render() 
    </div> 
</div> 
 
<script id="footer-template" type="text/x-template"> 
    <div class="quick-info-footer"> 
        ${if (elementType == "cell")} 
        <div class="cell-footer"> 
            <button id="more-details">More Details</button> 
            <button id="add">Add</button> 
        </div> 
        ${else} 
        <div class="event-footer"> 
            <button id="color">Change color</button> 
            <button id="set-color">Set color</button> 
        </div> 
        ${/if} 
    </div> 
</script> 
 
    function OnPopupOpen(args) { 
        if (["QuickInfo", "EditEventInfo"].indexOf(args.type) > -1) { 
            var colorBtn = args.element.querySelector("#color"); 
            if (colorBtn) { 
                new ej.buttons.Button( 
                    { content: "color", cssClass: "e-flat" }, 
                    colorBtn 
                ); 
                colorBtn.onclick = function (e) { 
                    var header = document.querySelector(".quick-info-header-content"); 
                    header.style.backgroundColor = colors[colorIndex]; 
                    colorIndex = colorIndex === 5 ? 0 : colorIndex + 1; 
                }; 
            } 
 
            var setColorBtn = args.element.querySelector("#set-color"); 
            if (setColorBtn) { 
                new ej.buttons.Button( 
                    { content: "Set color", cssClass: "e-flat" }, 
                    setColorBtn 
                ); 
                setColorBtn.onclick = function (e) { 
                    var data = scheduleObj.activeEventData.event; 
                    // Setting up the color to the appointment 
                    data.CategoryColor = colors[colorIndex - 1]; 
                    // Updating the value of the event object 
                    data.CustomData = "Edited data"; 
                    // Adding the changes in the event data using saveEvent method 
                    scheduleObj.saveEvent(data); 
                }; 
            } 
        } 
    } 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Marked as answer
DA Daniel December 21, 2020 11:53 PM UTC

Thanks the example help me a lot.

A quick question, is there a way to update the color of multiple events searching them by the Id (the action for this will be from the active event)?

Regards!

RV Ravikumar Venkatesan Syncfusion Team December 22, 2020 12:38 PM UTC

Hi Daniel, 

Thanks for the update. 

We have validated your requirement at our end. Based on your query we suspect that you need to set the color for all the occurrences of the recurrence event. We have achieved this requirement with the help of the code shown below. We have prepared a sample for your reference and it can be available below. 


[Index.cshtml] 
                setColorBtn.onclick = function (e) { 
                    var data = scheduleObj.activeEventData.event; 
                    var isRecurrence = data.RecurrenceRule ? true : false; 
                    data = isRecurrence ? scheduleObj.eventBase.getParentEvent(data) : data; 
                    // Setting up the color to the appointment 
                    data.CategoryColor = colors[colorIndex - 1]; 
                    // Updating the value of the event object 
                    data.CustomData = "Edited data"; 
                    // Adding the changes in the event data using saveEvent method 
                    if (isRecurrence) { 
                        scheduleObj.saveEvent(data, "EditSeries"); 
                    } else { 
                        scheduleObj.saveEvent(data); 
                    } 
                }; 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


DA Daniel December 22, 2020 02:37 PM UTC

Hi!

Not exactly are recurrences... some events have special/custom relation where if one is checked the other one also need to be checked (in this case, one is changed the color and the related event, that is not recurrence, the color is also changed).

Regards!

HB Hareesh Balasubramanian Syncfusion Team December 23, 2020 10:59 AM UTC

Hi Daniel, 

Thanks for the update. 

We have validated your shared query at our end and suspect that your requirement is to change the event color based on the custom field for the those events(both normal and recurrence) and for that, we have modified our previously updated sample using popupOpen event of the Scheduler, which can be viewed from the following link. 


setColorBtn.onclick = function (e) { 
                var data = scheduleObj.activeEventData.event; 
                var events = scheduleObj.eventsData; 
                var cusData; 
                if (data.CustomData == "Default data") { 
                                cusData = events.filter(i => i.CustomData == "Default data"); 
                } else { 
                                cusData = events.filter(i => i.CustomData == "Custom data"); 
                } 
                for (var i = 0; i < cusData.length; i++) { 
                                cusData[i].CategoryColor = colors[colorIndex - 1]; 
                                var colorEvent = cusData[i]; 
                                var isRecurrence = cusData[i].RecurrenceRule ? true : false; 
                                if (isRecurrence) { 
                                                scheduleObj.saveEvent(colorEvent, "EditSeries"); 
                                } else { 
                                                scheduleObj.saveEvent(colorEvent); 
                                } 
                } 
}; 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 
Hareesh 


DA Daniel December 23, 2020 10:25 PM UTC

Hi!

Thanks for the example, I think I got it... only is missing that is not working for me the filter method for the events. I'm not sure why.

I'm using an Ajax method to return the id of the related events. Based on that, for each id, I need to search them from scheduleObj.eventsData using filter method but is not returning anything. Testing event Id property, I see that exists the specific ID:



This is script from View:

var buttonClickActions = function (e) {
        var quickPopup = scheduleObj.element.querySelector('.e-quick-popup-wrapper');

        if (e.target.id === 'update') {
            $.ajax({
                url: "@Url.Action("SetPaid", "Calendar")",
                data: { "Id": quickPopup.querySelector('#Id').value },
                type: "POST",
                success: function (status) {
                    if (status.Message) {
                        alert(status.Message)
                    } else {
                        var ordersRelated = status.ordersRelated.split(',');
                        var data = scheduleObj.activeEventData.event;
                        var events = scheduleObj.eventsData; 

                        data.Paid = status.Paid;
                        data.Color = status.Color;
                        scheduleObj.saveEvent(data);

                        if (ordersRelated) {
                            for (var i = 0; i < ordersRelated.length; i++) {
                                var relOrder = events.filter(i => i.Id == ordersRelated[i]);
                                //alert(events[0].Id + ' - ' + ordersRelated[i] + '. Applying filter: ' + (relOrder.length == 1 ? 'found' : 'not found'))
                                if (relOrder.length == 1) {
                                    relOrder[0].Paid = status.Paid;
                                    relOrder[0].Color = status.Color;
                                    scheduleObj.saveEvent(relOrder[0]);
                                }
                            }
                        }
                    }

                    scheduleObj.closeQuickInfoPopup();
                },
                error: function () {
                    alert("Hubo un error al actualizar el pago")
                    scheduleObj.closeQuickInfoPopup();
                }
            });
        }
    };

My model related to events:

public class CalendarModels
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string User { get; set; }
        public double Price { get; set; }
        public string Paid { get; set; }
        public string Color { get; set; }
        public string DeliveryAddress { get; set; }
        public List IngredientsData { get; set; }
        public string Ingredients { get; set; }
        public string IngredientsToday { get; set; }
    }

Any idea why I cannot filter by Id?

Thanks, regards!


HB Hareesh Balasubramanian Syncfusion Team December 24, 2020 04:01 PM UTC

Hi Daniel, 
  
Thanks for the update. 
  
We have validated your shared query “only is missing that is not working for me the filter method for the events. I'm not sure why” at our end and we suspect that your reported problem may due to mismatch of the data types in that filtering and the root cause may due filtering a ordersRelated variable “string type” with id “integer type” and that could be the reason for the reported issue. Kindly convert the id variable to string type else orderRelated variable to integer type. 
  
Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better?   
   
  1. Kindly share the scheduler rendering code snippets.
  2. Replicate the issue in the above sample.
  3. Share the issue replicating sample (if possible)
  
We will happy to assist you. 
  
Regards, 
Hareesh 


DA Daniel December 29, 2020 04:12 PM UTC

Hi!

Tried several times with data conversions and other stuffs but no luck. Then, I found that my code is ok but only works if I assing to a variable the "ordersRelated[i]" that contains the OrderId... not sure why but this works:

var buttonClickActions = function (e) {
        var quickPopup = scheduleObj.element.querySelector('.e-quick-popup-wrapper');

        if (e.target.id === 'update') {
            $.ajax({
                url: "@Url.Action("SetPaid", "Calendar")",
                data: { "Id": quickPopup.querySelector('#Id').value },
                type: "POST",
                success: function (status) {
                    if (status.Message) {
                        alert(status.Message)
                    } else {
                        var ordersRelated = status.ordersRelated.split(',');
                        var data = scheduleObj.activeEventData.event;
                        var events = scheduleObj.eventsData; 

                        data.Paid = status.Paid;
                        data.Color = status.Color;
                        scheduleObj.saveEvent(data);

                        if (ordersRelated) {
                            for (var i = 0; i < ordersRelated.length; i++) {
                                var orderID = ordersRelated[i];
                                var relOrder = events.filter(i => i.Id == orderID);
                                if (relOrder.length == 1) {
                                    relOrder[0].Paid = status.Paid;
                                    relOrder[0].Color = status.Color;
                                    scheduleObj.saveEvent(relOrder[0]);
                                }
                            }
                        }
                    }

                    scheduleObj.closeQuickInfoPopup();
                },
                error: function () {
                    alert("Hubo un error al actualizar el pago")
                    scheduleObj.closeQuickInfoPopup();
                }
            });
        }
    };

Regards!

NR Nevitha Ravi Syncfusion Team December 30, 2020 07:08 AM UTC

Hi Daniel, 

Thanks for your update, we are happy that your reported issue has been resolved at your end. Please get back to us if you need any further assistance. 

Regards, 
Nevitha  
15

Loader.
Up arrow icon