changing month appointment text style

Question

In the month view of the schedule, I would like to add a line-through on the text for the specific appointments with a certain value. Not the popup that comes up after you click the appointment, but just as the appointment appears on the schedule.

Thanks

Karthigeyan Krishnamurthi · Answer

Hi Anthony,  
 
Thank you for contacting Syncfusion support. 
 
We can customize the appointment text using QueryCellEvent event and for the same we have prepared the below sample for your reference. In the below sample, line-through CSS is applied only to Saturday appointments subject. 
https://jsplayground.syncfusion.com/bfkasvyf 
UG: https://help.syncfusion.com/aspnetmvc/schedule/customization#scheduler-customization-using-querycellinfo 
 




queryCellInfo: "textCustomization", 
 
function textCustomization(args) { 
            if (args.requestType == "appointment" && args.model.currentView == "month") { 
                if (args.appointment.StartTime.getDay() == 6) { 
                    var textDiv = args.element.find(".e-apptext"); 
                    textDiv.css("text-decoration", "line-through"); 
                } 
            } 
        } 
 
Note: Above sample is made in JS for your reference and the same can be achieved in MVC too. 
 
Regards, 
Karthigeyan

Anthony Tran - NO LONGER THERE · Answer

Thank you, this solution works.One other thing, I'm working through filtering appointments on the schedule.  I've gotten to the point where I have the filtered appointments, but the demo on site doesn't show how to load the schedule with the filtered appointments.  Any assistance with this?

Karthigeyan Krishnamurthi · Answer

Hi Anthony, 
 
Thanks for your update. 
 
We can update the Scheduler data source with its instance and for the same we have prepared the below sample. Initially, Schedule is rendered with empty data source and when the button is clicked, new collection is assigned to the Scheduler as shown below. 
http://jsplayground.syncfusion.com/hsloogax 
 




<input type="button" id="setDT" onclick="test()" value="Click Here" /> 
 
function test() { 
            var dManager = [{ 
                Id: 109, 
                Subject: "Bering Sea Gold", 
                StartTime: new Date(2014, 4, 6, 11, 00), 
                EndTime: new Date(2014, 4, 6, 13, 00), 
                Description: "", 
                AllDay: false, 
                Recurrence: false 
            }]; 
            var scheduleObj = $("#Schedule1").data("ejSchedule"); 
            scheduleObj.option("appointmentSettings.dataSource", dManager); 
        } 
 
Note: Above sample is made in JS for your reference and the same can be achieved in MVC too.  
  
Regards,  
Karthigeyan