We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Demo custom appointment details

Thread ID:

Created:

Updated:

Platform:

Replies:

147292 Sep 5,2019 10:57 AM UTC Jan 27,2020 04:26 PM UTC Blazor 18
loading
Tags: Scheduler
Peter Benedix
Asked On September 5, 2019 10:57 AM UTC

Hello,

I to customize the window where you can edit the appointment Details because we like to store much more data for a single appointment. I tried <template> but there is no effect. Could I get a small demo how to do this?

Thanks!

Nevitha Ravi [Syncfusion]
Replied On September 5, 2019 12:50 PM UTC

Hi Peter, 

Greetings from Syncfusion Support. 

We have prepared a sample to customize the editor window using EditorTemplate which can be downloaded from the following link. 

    <ScheduleTemplates> 
        <EditorTemplate> 
            <table class="custom-event-editor" width="100%" cellpadding="5"> 
                <tbody> 
                    <tr> 
                        <td class="e-textlabel">Summary</td> 
                        <td colspan="4"> 
                            <EjsTextBox Id="Subject" CssClass="e-field e-input" Value="@((context as TemplateArgs).Subject)"></EjsTextBox> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="e-textlabel">Status</td> 
                        <td colspan="4"> 
                            <EjsDropDownList ID="EventType" DataSource="@StatusData" Placeholder="Choose status" CssClass="e-field" Value="@((context as TemplateArgs).EventType)" HtmlAttributes="@eventType"> 
                                <DropDownListFieldSettings Value="id"></DropDownListFieldSettings> 
                            </EjsDropDownList> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="e-textlabel">From</td> 
                        <td colspan="4"> 
                            <EjsDateTimePicker ID="StartTime" HtmlAttributes="@StartName" CssClass="e-field" Value="@((context as TemplateArgs).StartTime)"></EjsDateTimePicker> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="e-textlabel">To</td> 
                        <td colspan="4"> 
                            <EjsDateTimePicker ID="EndTime" HtmlAttributes="@EndName" CssClass="e-field" Value="@((context as TemplateArgs).EndTime)"></EjsDateTimePicker> 
 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="e-textlabel">Reason</td> 
                        <td colspan="4"> 
                            <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" value="@((context as TemplateArgs).Description)" 
                                      style="width: 100%; height: 60px !important; resize: vertical"></textarea> 
                        </td> 
                    </tr> 
                </tbody> 
            </table> 
        </EditorTemplate> 
    </ScheduleTemplates> 


 


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

Regards, 
Nevitha 


Peter Benedix
Replied On September 5, 2019 01:11 PM UTC

Perfect. Thanks!

Balaji Paramesvaran [Syncfusion]
Replied On September 6, 2019 07:13 AM UTC

Hi Peter,

We are happy that our solution fulfills your requirement 😄  

Regards,
Balaji

Peter Benedix
Replied On September 6, 2019 01:20 PM UTC

I'm sorry but I have to reopen this case - in your example the binding for StartTime and EndTime is not working - there is no effect when changing it. Any idea?

Peter Benedix
Replied On September 6, 2019 01:45 PM UTC

I added a video - there is almost strange behaviour when changing time. Did you tested the demo?



Attachment: SchedulerDemoFailed_f4be7bed.zip

Peter Benedix
Replied On September 8, 2019 07:24 AM UTC

Please can you give me some feedback? Time is running...Thanks.

Nevitha Ravi [Syncfusion]
Replied On September 9, 2019 01:03 PM UTC

Hi Peter, 

Sorry for the inconvenience caused. 

We could reproduce the reported issue “StartTime and EndTime is not updating properly” at our end and confirm this as a defect. Therefore we have logged the bug report which can be tracked from the following link. 

The fix for the issue will be included in our bi-weekly patch release rolled out on end of September and we would appreciate your patience until then. 

Regards, 
Nevitha. 


NKOUAMBIA CHIMENE
Replied On September 13, 2019 02:55 PM UTC

Hello,

I just add and <ScheduleTemplates> it show well but I just want to know How can I handle scheduler CRUD Event with custom edit templates

when no Templates the default  <ScheduleEvents TValue="AppointmentData" ActionCompleted="OnActionCompleted">ScheduleEvents> work fines
but with custom EditTemplates how can I achieve it



Thanks,
Chimène NK.

Nevitha Ravi [Syncfusion]
Replied On September 16, 2019 02:37 PM UTC

Hi Nkouambia, 

We can achieve “CRUD operation with custom edit template for appointment” by adding ’e-field’ class to each field defined within template, so as to allow the processing of those field values internally. We prepared the sample and download it from the below location. As well as, the ActionCompleted event trigger with corresponding event details. 

Kindly check the above sample and confirm whether it comes close to your requirement. 

Regards, 
Nevitha 


NKOUAMBIA CHIMENE
Replied On September 16, 2019 04:21 PM UTC

Hello Thanks for answer,
Please can I have a link or an example of EditorTemplates with data validations in scheduler CRUD with Editor Templates?
Is there a possibilities to add <EditForm Model="@Model" OnValidSubmit="@SaveReservation()" OnInvalidSubmit="@HandleInvalidSubmit">
 or <form  @onsubmit="@SaveReservation()"> in <ScheduleTemplates><EditorTemplate></EditorTemplate></ScheduleTemplates> ??
----- MY CODE ----
<EjsSchedule TValue="AppointmentData" ModelType="@Model" Height="650px" SelectedDate="@(DateTime.Now.Date)" ShowWeekend="false" CurrentView="View.WorkWeek" FirstDayOfWeek=1  StartHour="07:00" EndHour="17:00" >
    <ScheduleTemplates>
    <EditorTemplate>
        <ul class="validation-errors">
            @if (validateur != null) {
            @foreach (var res in validateur.ValidationResults)
            {
                <li class="validation-message">@res.ErrorMessage</li>
            }
            }  
        </ul>
        <div>  
                <div class="form-row">  
                <div class="col-sm-3">  
                <label for="Description" class="control-label">Description</label>                               
                </div>
                <div class="col-sm-7"> 
                   <EjsTextBox Id="Subject" CssClass="e-field e-input" Value="@((context as TemplateArgs).Subject)"></EjsTextBox>
                </div>
            </div>
            <br/>  
            <div class="form-row">  
                <div class="col-sm-3">
                <label for="salles" class="control-label">Salle Examen</label>                               
                </div>
                <div class="col-sm-7">                       
                   <EjsDropDownList @bind-Value="@((context as TemplateArgs).IdSalleExamenSys)" ID="IdSalleExamenSys" DataSource="@_service.salleExamenList" Placeholder="Sélectionner la salle" CssClass="e-field"> 
                        <DropDownListFieldSettings Value="IdSalleExamenSys" Text="NomSalle"></DropDownListFieldSettings> 
                    </EjsDropDownList>                          
                </div>
            </div>
            <br/>  
            <div class="form-row">  
                <div class="col-sm-3">
                <label for="ressources" class="control-label">Spécialité</label>                               
                </div>
                <div class="col-sm-7">
                    <EjsDropDownList @bind-Value="@((context as TemplateArgs).IdTypeConsultation)" ID="IdTypeConsultation" Placeholder="Sélectionner la spécialité" DataSource="@_service.typeConsList" AllowFiltering=true IgnoreAccent=true CssClass="e-field">        
                         <DropDownListFieldSettings  Value="IdTypeConsultation" Text="Description"></DropDownListFieldSettings>
                    </EjsDropDownList>
                </div>
            </div>  
            <br/>          
            <div class="form-row">  
                <div class="col-sm-5 col-form-label">
                    <label for="DateHeureDebut" class="control-label">Début</label>                               
                    <EjsDateTimePicker ID="StartTime" HtmlAttributes="@StartName" CssClass="e-field" Value="@((context as TemplateArgs).StartTime)" format="dd-MMM-yy hh:mm a" StrictMode="true"></EjsDateTimePicker>     
                </div>
                <div class="col-sm-5 col-form-label">
                    <label for="DateHeureFin"  class="control-label">Fin</label>                              
                    <EjsDateTimePicker ID="EndTime" HtmlAttributes="@EndName" CssClass="e-field" Value="@((context as TemplateArgs).EndTime)" format="dd-MMM-yy hh:mm a" StrictMode="true"></EjsDateTimePicker>   
                </div>
            </div> <br/>             
        </div> 
        </EditorTemplate>
    </ScheduleTemplates>
  <ScheduleEventSettings DataSource="@DataSource" EnableTooltip="true">
        <ScheduleField>
            <FieldSubject Name="Subject" Title="Summary"></FieldSubject>
            <FieldDescription Name="Description" Title="Comments"></FieldDescription>
        </ScheduleField>         
    </ScheduleEventSettings>   
    <ScheduleEvents TValue="AppointmentData" ActionCompleted="OnActionCompleted"></ScheduleEvents> 
</EjsSchedule>
@code{
    public List<AppointmentDataDataSource = new List<AppointmentData>();
    validateur = new ValidateurPage<ReservationSalle>(reservation);
     public class TemplateArgs
    {
        public string Subject { getset; }
        public string EventType { getset; }
        public DateTimeStartTime { getset; }
        public DateTimeEndTime { getset; }
        public string Description { getset; }
        public int IdSalleExamenSys { getset; }
        public int IdTypeConsultation { getset; }       
    }   
public void OnActionCompleted(ActionEventArgs<AppointmentDataargs)
    {
        if (args.RequestType == "eventCreated")
        {    reservation.IdTypeConsultation = args.AddedRecords[0].IdTypeConsultation;
               reservation.IdSalleExamenSys = args.AddedRecords[0].IdSalleExamenSys
                 ......
          SaveReservation();
        }
    public TemplateArgs Model = new TemplateArgs();
  
     public async Task SaveReservation(){
        validateur.Valider();
        
        if (validateur.ValidationResults.Count == 0) {
        viewParams = await _service.SaveReservationSalle(reservationviewParams);
        Cancel();
        }
public class AppointmentData
    {
        public int Id { getset; }
        public string Subject { getset; }
        public string Location { getset; }
        public DateTime StartTime { getset; }
        public DateTime EndTime { getset; }
        public string Description { getset; }
        public bool IsAllDay { getset; }
        public bool IsReadonly { getset; }
        public string RecurrenceRule { getset; }
        public string RecurrenceException { getset; }
        public Nullable<intRecurrenceID { getset; }
        public int Status { getset; }
        public int Priority { getset; }
        public int IdSalleExamenSys { getset; }
        public int IdTypeConsultation { getset; }
        public string EventType { getset; }      
    }


}

this is my model
public partial class ReservationSalle
    {
        public int IdReservationSalle { getset; }

        [Range(1int.MaxValueErrorMessage = "Selectionner une salle")]
        [IsUniqueValidateAttribute]
        public int IdSalleExamenSys { getset; }

        [Range(1int.MaxValueErrorMessage = "Selectionner une Spécialité")]
        public int IdTypeConsultation { getset; }
..................
}
    
Thanks,
Chimène NK.


NKOUAMBIA CHIMENE
Replied On September 17, 2019 02:38 PM UTC

Hello!
Another questions with custom EditTemplates in scheduler.

When create new event it doesn't load the context IdSalleExamenSys However it load StartTime and EndTime correctly
<EjsSchedule TValue="AppointmentData" ModelType="@Model" Width="100%" Height="650px" SelectedDate="@(DateTime.Now.Date)" ShowWeekend="false" CurrentView="View.TimelineWeek" FirstDayOfWeek=1  StartHour="08:00" EndHour="16:00" >
    <ScheduleTemplates>
.....................................
<EjsDropDownList @bind-Value="@((context as TemplateArgs).IdSalleExamenSys)" ID="IdSalleExamenSys" DataSource="@_service.salleExamenList" Placeholder="Sélectionner la salle" CssClass="e-field"> 
<DropDownListFieldSettings Value="IdSalleExamenSys" Text="NomSalle"></DropDownListFieldSettings> 
</EjsDropDownList>
.........................................
     </EditorTemplate>
    </ScheduleTemplates>
</EjsSchedule>

clicking on the cell in red 

suppose to give me  as in defaut schedule editor but I get this 
How can I correct it or I'm missing somethings??

I also let a question yesterday about EditorTemplate with form validation.

Thanks,
Chimène Nk.

NKOUAMBIA CHIMENE
Replied On September 18, 2019 01:09 PM UTC

Hello Team!!

Please I still have no Answer for my question post from September 16, 2019 04:21 PM UTC. It's important for me to know how to manage the validation when implement from model as I detail it in my post. The property Validation in ScheduleField is not sufficient for me since I Have a lot of validation control in my model.

Thanks,
Chimène NK.

Nevitha Ravi [Syncfusion]
Replied On September 18, 2019 06:35 PM UTC

Hi Nkouambia, 

Sorry in getting back to you. 

Q: Form validation in EditorTemplate 
In Scheduler the content of EditorTemplate will append to the form, so we couldn’t use another form within editor template to validate the fields. You can use custom editor window by preventing default editor window and perform save action at sample end. Kindly share the details whether you need to validate the fields in the window itself or validate before updating them to database to proceed further on this. 

Q: When create new event it doesn't load the context IdSalleExamenSys 
We could reproduce the reported issue “Resource details are not received while opening editor template to create new events” and confirm this as a defect. So we have logged the bug report which can be tracked from the following link. 
 
The issue fix will be included in our next patch release expected to be rolled out at the end of September and we would appreciate your patience until then. 

Regards, 
Nevitha 


NKOUAMBIA CHIMENE
Replied On September 18, 2019 07:54 PM UTC

Hello Nevitha! 

I Have To valide before save in DB so if the model isnot valid it Has to show all the result of validation

1. I have a model with several validation (required, isunique, IsGreatherThan, IsOverlap, ... )
2. I have a controllers with the if (!ModelState.IsValid)
3. I have A services that call the controller
4. I Have my page that I  want to load all validation result if Model is not valid So in my <EditorTemplate> Form I want that when User click on Save boutton, if (ValidationResults.count > 0) it prevent the windows to close and write all my message in my page (As the Validation proprety in ScheduleField do)  
<ul class="validation-errors">
@if (validateur != null) {
@foreach (var res in validateur.ValidationResults)
{
<li class="validation-message">@res.ErrorMessage</li>
}
}  
</ul>
5. The save action has to be completed when ValidationResults.count == 0
public async Task SaveReservation(){
validateur.Valider();
if (validateur.ValidationResults.Count == 0) {
await _service.SaveReservationSalle(reservation);
}else{
HERE i WANT TO PREVENT WINDOWS TO CLOSE IF POSSIBLE
}
}

//*****//
From now save/delete/Update are triggers well with my EditorTemplate in my scheduler, but when I clicked SAVE bouttons without enter all necessary fields, the ValidationResults.Count > 0 so the save action doesn't occurs but my editor windows close.

All these already exist and work well in a separate page with 
<form  @onsubmit="@(async () => await SaveReservation())"> 
    <ul class="validation-errors">
    @if (validateur != null) {
      @foreach (var res in validateur.ValidationResults)
      {
        <li class="validation-message">@res.ErrorMessage</li>
      }
    }  
  </ul>
  <div>..............</div>
   <input type="submit" class="btn btn-success" style="width:220px;" value="Save"/>      
</form>  

So my questions is How can I handle the same behavior with EditorTemplate in Scheduler


Thanks,
Chimène Nk.

Nevitha Ravi [Syncfusion]
Replied On September 19, 2019 01:38 PM UTC

Hi Nkouambia, 
 
Thanks for your update. 
 
We have prepared a sample to validate the fields by having custom editor window for your reference which can be available from the following link. 
 
<EjsDialog @bind-Visible="@DlgVisible" IsModal="true" @ref="DialogObj" Height="270px" Width="500px" ShowCloseIcon="true"> 
    <DialogTemplates> 
        <Header> <div>Editor Window </div> </Header> 
        <Content> 
            <EditForm Model="appointmentValidation" OnValidSubmit="@OnValidSubmit"> 
                <DataAnnotationsValidator /> 
                <ValidationSummary /> 
                <table class="custom-event-editor" width="100%" cellpadding="5"> 
                    <tbody> 
                        <tr> 
                            <td class="e-textlabel">Summary</td> 
                            <td colspan="4"> 
                                <EjsTextBox @ref="SubjectObj" @bind-Value="@appointmentValidation.Subject"></EjsTextBox> 
                                <ValidationMessage For="@(() => appointmentValidation.Subject)" /> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="e-textlabel">From</td> 
                            <td colspan="4"> 
                                <EjsDateTimePicker @ref="StartTimeObj" ID="Start" @bind-Value="@appointmentValidation.StartTime"></EjsDateTimePicker> 
                                <ValidationMessage For="@(() => appointmentValidation.StartTime)" /> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="e-textlabel">To</td> 
                            <td colspan="4"> 
                                <EjsDateTimePicker @ref="EndTimeObj" ID="End" @bind-Value="@appointmentValidation.EndTime"></EjsDateTimePicker> 
                                <ValidationMessage For="@(() => appointmentValidation.EndTime)" /> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="e-textlabel">Grappes</td> 
                            <td colspan="4"> 
                                <EjsDropDownList @bind-Value="appointmentValidation.IdGrappeSys" ID="IdSalleExamenSys" DataSource="@salleExamen" Placeholder="Sélectionner la salle"> 
                                    <DropDownListFieldSettings Value="id" Text="text"></DropDownListFieldSettings> 
                                </EjsDropDownList> 
                                <ValidationMessage For="@(() => appointmentValidation.IdGrappeSys)" /> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="e-textlabel">SalleExamens</td> 
                            <td colspan="4"> 
                                <EjsDropDownList @bind-Value="appointmentValidation.IdSalleExamenSys" ID="IdTypeConsultation" Placeholder="Sélectionner la spécialité" DataSource="@typeConsList" AllowFiltering=true IgnoreAccent=true> 
                                    <DropDownListFieldSettings Value="id" Text="text"></DropDownListFieldSettings> 
                                </EjsDropDownList> 
                                <ValidationMessage For="@(() => appointmentValidation.IdSalleExamenSys)" /> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="e-textlabel">Reason</td> 
                            <td colspan="4"> 
                                <EjsTextBox @ref="DescriptionObj" @bind-Value="@appointmentValidation.Description"></EjsTextBox> 
                                <ValidationMessage For="@(() => appointmentValidation.Description)" /> 
                            </td> 
                        </tr> 
                    </tbody> 
                </table> 
                <button type="submit">Save</button> 
            </EditForm> 
        </Content> 
    </DialogTemplates> 
</EjsDialog> 
….. 
  void OnValidSubmit() 
    { 
        DlgVisible = false; 
        AppointmentData EventData = new AppointmentData(); 
        EventData.Subject = appointmentValidation.Subject; 
        EventData.EndTime = (DateTime)appointmentValidation.EndTime; 
        EventData.StartTime = (DateTime)appointmentValidation.StartTime; 
        EventData.Description = appointmentValidation.Description; 
        EventData.IdGrappeSys = appointmentValidation.IdGrappeSys; 
        EventData.IdSalleExamenSys = appointmentValidation.IdSalleExamenSys; 
        EventData.Id = this.Id; 
        if (this.Action == "CellClick") 
        { 
            this.ScheduleObj.AddEvent(EventData); //to add new appointment 
        } 
        else 
        { 
            this.ScheduleObj.SaveEvent(EventData); // to save the existing appointment 
        } 
        validationStatus = "Success!"; 
    } 

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

Regards, 
Nevitha 


NKOUAMBIA CHIMENE
Replied On September 19, 2019 06:26 PM UTC

Hello,
I will try the last option you have propose and come back when finished, but before I change all my logic I have another question??

I there a way to prevent form to close even if I click on CANCEL(just and exemple)??

My validation work fine but when click on save it doesn't save in database(That is Ok since model is not valid) it load ValidationResult correctly it also show it in interface but it close the windows immediatly
So if I comme and reopend the any existing event I will see my Validation result as showing (since I haven't clearing it yet, it suppose to be clear when click cancel or when ;odel is valid)


I still want to maintains my logic like in my September 16, 2019 04:21 PM UTC post on this forum

<EjsSchedule TValue="AppointmentData" ModelType="@Model" Width="100%" Height="auto" SelectedDate="@(DateTime.Now.Date)" ShowWeekend="false" CurrentView="View.TimelineWeek" FirstDayOfWeek=1  StartHour="08:00" EndHour="16:00" >
 <ScheduleEvents TValue="AppointmentData" ActionCompleted="OnActionCompleted"></ScheduleEvents> 
   <ScheduleTemplates>
<EditorTemplate>
<div>
-----------------
</div>
</EditorTemplate>
</ScheduleTemplates>
 public void OnActionCompleted(ActionEventArgs<AppointmentData> args)
    {
        if (args.RequestType == "eventCreated")
        {
           /**********/
        }
        if (args.RequestType == "eventRemoved")
        {
            // will trigger when appointment deleted           
        }
        if (args.RequestType == "eventChanged")
        { 
          /* HOW CAN I PREVENT THE FORM TO CLOSE IF MODEL IS NOT VALID ??????????*//////////
          // will trigger when appointment updated 
        }
       // this.StateHasChanged();
    }
Sorry if my english is not realy good, 
Thanks,
Chimene NK.

Nevitha Ravi [Syncfusion]
Replied On September 20, 2019 12:55 PM UTC

Hi Nkouambia, 

Thanks for your update. 

We have already planned to introduce an event before closing the editor window, using which you can prevent closing of editor window if the model is not valid. This can be tracked from the following link. 

The event will be available in our next patch release expected to be rolled out at end of September. We would appreciate your patience until then. 

Regards, 
Nevitha 


Alagumeena Kalaiselvan [Syncfusion]
Replied On January 27, 2020 04:26 PM UTC

Hi Nkouambia, 
  
Sorry for the delay to get back to you! 
  
We have implemented your feature request “Provide event handler before closing the editor popup window” and  included with patch release which is promised.  
  
Refer to the below release notes. 
  
We will happy to assist you if you need further assistance. 
  
Regards 
Alagumeena.K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon