1. Home
  2. Forum
  3. Blazor
  4. Get selected appointment in AgendaView and suppress Popup

Get selected appointment in AgendaView and suppress Popup

Hello,

because the using of individual EditTemplates for Scheduler is broken, we need to build our own component for editing appointments. How can we get the selected appointment in AgendaView and suppress the default editing popup.

Thanks.

11 Replies
NR Nevitha Ravi Syncfusion Team September 11, 2019 11:16 AM UTC

Hi Steffen, 

Greetings from Syncfusion Support. 

Query #1: because the using of individual EditTemplates for Scheduler is broken 

As per our understanding, you are trying to update start and end time through editor window and facing the issue. We have already fixed this issue internally and will be included in our next bi-weekly release which is expected to be rolled out on September 16, 2019. If your issue in editor window is different kindly share the issue details to validate it at our end. 

Query #2: we need to build our own component for editing appointments, How can we get the selected appointment in AgendaView and suppress the default editing popup. 
 
You can prevent the default editor window and build your own component by getting the selected appointments in OnPopupOpen event using the following code. 

    public void PopupOpen(PopupOpenEventArgs<AppointmentData> args) { 
        if(args.Type == PopupType.Editor && args.Data.Id != 0) 
        { 
            args.Cancel = true; //to prevent default editor for appointments 
            var selectedAppointment = args.Data; //to get selected appointment object 
        } 
    } 

Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE September 17, 2019 04:07 PM UTC

Hello Nevitha,

I left yesterday and today somes questions in the link below without answer I suppose that it's because no ticket as been created. Can I have list of  scheduler event and their use like  OnPopupOpen, ActionCompleted, ....


Thanks,
Chimène Nk.

NR Nevitha Ravi Syncfusion Team September 18, 2019 06:38 PM UTC

Hi Nkouambia, 

We have posted the response in the corresponding forum. 

We have shared the use of scheduler events in the following document, please refer and let us know if you need any further assistance. 

Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE September 20, 2019 01:16 PM UTC

Hello Nevitha,

Thanks for the document about scheduler events but if I can afford to ask, in the document can you just add type of Event args please it will be helpfull for other users I think e.g. (OnPopupOpen(PopupOpenEventArgs<AppointmentData> args), OnActionCompleted(ActionEventArgs<AppointmentData> args), ....) it will avoid to just declare it as object(e.g OnCellClick(object args)) and then try to make a debug to know what is the real type. And I also think it's necessary to put it in online documentation, to avoid the same question to be ask several time in forums. 

QUESTIONS: Have you planned to handle Ctrl + Click on cells ?? Let me explain my scenario 
     1. I want to create multiple event at time
     2. I select 2,3 or more cells
     3. Then I click on buttons to add event in selected cells or I can decide to show a dialogbox foreach selectcells.count() and then make my operations
I Hope my description is clear.
          
Team does a good job continue !!!

Thanks,
Chimène NK.

NR Nevitha Ravi Syncfusion Team September 23, 2019 06:41 AM UTC

Hi Nkouambia, 

We are glad that our document about scheduler events helps you. Published the events with its arguments which is available in scheduler and can be referred from the following link. 

We will document the events with its argument type consolidated and publish in User Guide on or before 2019 Volume 3 main release. For now, we have updated the previously shared document with the argument type which can be referred from the following link. 

We have handled the CTRL + Click event within OnCellClick event. We have prepared a sample for your following requirement which can be downloaded from the following link. 
  • Multiple cells can be selected by CTRL + click
  • Process each selected cell

    EjsSchedule<AppointmentData> ScheduleObj; 
    public List<CellClickEventArgs> cellDetails = new List<CellClickEventArgs>(); 
    public List<DOM> elementDetails = new List<DOM>(); 
    public string[] CustomClass = { "custom-class" }; 
    public async void OnCellClicked(CellClickEventArgs args) 
    { 
        if (args.Event.CtrlKey == true) //to check whether CTRL key is pressed 
        { 
            args.Cancel = true;   //to prevent default action 
            args.Element.AddClass(CustomClass); // to add the background color for selected cells 
            elementDetails.Add(args.Element); 
            CellClickEventArgs cell = await this.ScheduleObj.GetCellDetails(args.Element); //to get the current cell details 
            cellDetails.Add(cell); 
        } 
    } 
 
    public void OnButtonClick() 
    { 
        for (int i = 0; i < cellDetails.Count; i++) 
        { 
            Random rnd = new Random(); 
            int Id = rnd.Next(1000); 
            List<AppointmentData> newData = new List<AppointmentData>(); 
            newData.Add(new AppointmentData 
            { 
                Id = Id, 
                Subject = "Added events", 
                StartTime = cellDetails[i].StartTime, 
                EndTime = cellDetails[i].EndTime 
            }); 
            this.ScheduleObj.AddEvent(newData);  //to add appointments to the scheduler 
            elementDetails[i].RemoveClass(CustomClass); // to remove the background color for selected cells 
        } 
        cellDetails.Clear(); 
    } 

Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE September 24, 2019 05:52 PM UTC

Hi Nevitha,
I just try implement the ctrl+click on CELLS but the backgroud color doesn't change to differenciate selected cells with the others
 args.Element.AddClass(CustomClass); // to add the background color for selected cells 

.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.custom-class,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.custom-class,
.e-schedule .e-month-view .e-appointment.custom-class {
background: @BackgroundColor;

I have already try to use the same instruction when EventRendered to change the background color without success or i'm not implement well?.

Questions: How can I ajust the Height of event with the cells heigth

this is my template from now every informations are not visible.
  
Thank!
Chimène NK.
           

NR Nevitha Ravi Syncfusion Team September 25, 2019 01:20 PM UTC

Hi Nkouambia, 

Thanks for your update. 

Q: Background color not added for selected cells 
We have shared the styles for vertical view to change the background color of the selected cells in our previous update which would result in color not applied in your timeline views. Please refer the following code for timeline views. 
.e-schedule .e-timeline-month-view .e-work-cells.custom-class, 
.e-schedule .e-timeline-view .e-work-cells.custom-class { 
  background: #e0e0e0; 
} 

Q: Background color for appointments 
To change the background color of the appointments in timeline views using EventRendered event refer the following code. 

.e-schedule .e-timeline-month-view .e-appointment.custom-class, 
.e-schedule .e-timeline-view .e-appointment.custom-class { 
  background: #f8a398; 
} 

Q: How to set work cells height to events 
You can achieve the requirement by setting height for work cells and appointment in style section and for the same we have shared a sample for your reference which can be referred from the following link.  

In the following code we have added my-schedule class to our Scheduler using CssClass property. 

    
 <EjsSchedule @ref="ScheduleObj" TValue="AppointmentData" CssClass="my-schedule" ModelType="@Model" Width="100%" Height="650px" SelectedDate="@(new DateTime(2019, 1, 10))"> 
…… 
….  
    .my-schedule.e-schedule .e-timeline-view .e-resource-cells,  
    .my-schedule.e-schedule .e-timeline-month-view .e-resource-cells, 
    .my-schedule.e-schedule .e-timeline-view .e-work-cells, 
    .my-schedule.e-schedule .e-timeline-month-view .e-work-cells { 
        height: 75px; 
    } 
    .my-schedule.e-schedule .e-timeline-view .e-appointment, 
    .my-schedule.e-schedule .e-timeline-month-view .e-appointment 
     { 
        height: 73px; 
    } 

Please try the sample and let us know if you need any further assistance. 

Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE September 26, 2019 07:15 PM UTC

Hello! 

Thanks for answer, but I still Have a Question about Styles, since my CSS level is too Low, refer to image below
1- I want the line contains First Ressources Level (CARDIOLOGIE, MEDECINE INTERNE, ...)   to have Height like 30px for example and background color grey (since that line is not editable I think it's not necessarly to have the same height with editable one)
2- I Want the height of Apointment to fit All the Cells height (from now it has unwanted gap)



This is my Style from now but it doesn't give expected result

.my-schedule.e-schedule .e-timeline-view .e-resource-cells, 
    .my-schedule.e-schedule .e-timeline-month-view .e-resource-cells,
    .my-schedule.e-schedule .e-timeline-view .e-work-cells,
    .my-schedule.e-schedule .e-timeline-month-view .e-work-cells {
        height: 70px;
    }

    .my-schedule.e-schedule .e-timeline-view .e-appointment,
    .my-schedule.e-schedule .e-timeline-month-view .e-appointment
     {
        height: 70px;
    }

    .my-schedule.e-schedule .e-timeline-view .e-time-cells-wrap table td{
        height: 70px;
    } 
    
     .my-schedule.e-schedule .e-timeline-view .e-date-header-wrap table col, 
    .my-schedule.e-schedule .e-timeline-view .e-content-wrap table col { 
        width: 70px; 
    }  /**/

Thanks,
Chimène NK.

NR Nevitha Ravi Syncfusion Team September 27, 2019 11:14 AM UTC

Hi Nkouambia, 

Thanks for your update. 

We have prepared sample for your requirements  “to differentiate the heights of parent and child resource cells and rendered the appointments to fit the work cells” which can be referred from the following link. 

<style> 
    .my-schedule.e-schedule .e-timeline-view .e-resource-cells, 
    .my-schedule.e-schedule .e-timeline-month-view .e-resource-cells, 
    .my-schedule.e-schedule .e-timeline-view .e-work-cells, 
    .my-schedule.e-schedule .e-timeline-month-view .e-work-cells { 
        height: 100px; 
    } 
 
    .my-schedule.e-schedule .e-timeline-view .e-resource-cells.e-parent-node, 
    .my-schedule.e-schedule .e-timeline-month-view .e-resource-cells.e-parent-node, 
    .my-schedule.e-schedule .e-timeline-view .e-work-cells.e-resource-group-cells, 
    .my-schedule.e-schedule .e-timeline-month-view .e-work-cells.e-resource-group-cells { 
        height: 40px; 
    } 
</style> 
 
.. 
  public async void OnEventRendered(EventRenderedArgs<AppointmentData> args) 
    { 
        var style = await args.Element.GetAttribute("Style"); 
        string height = style.ToString() + "height:98px;"; //reduce two pixels from the height of work cells for borders 
        args.Element.SetAttribute("Style", height); 
    } 

 

Please try the sample ad let us know if you need any further assistance. 

Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE September 27, 2019 01:59 PM UTC

Hello!

It Works like a charm.

Thanks,
Chimène NK.


NR Nevitha Ravi Syncfusion Team September 30, 2019 06:15 AM UTC

Hi Nkouambia, 

We are glad that our solution fulfilled your requirement. 

Regards, 
Nevitha 


Loader.
Up arrow icon