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. Image for the cookie policy date

Angular 2 Scheduler Appointment Customization

Hi
There are a few examples on the forum about customization of the Appointment window but none for Angular 2 component.
Can you please provide an example of how one could add/remove fields from the appointment window and then post those values? Also, how can one open the window grammatically(from an external button)?
Thank you and great job.

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 7, 2017 01:17 PM UTC

Hi John, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared the custom window sample in Angular2 platform which can be download from the below location. 
 
Kindly refer the below code example used in the sample. 
 
<Code> 
 
   <div id="customWindow" style="display: none"> 
        <form id="custom"> 
            <table width="100%" cellpadding="5"> 
                <tbody> 
                    <tr style="display: none"> 
                        <td>Id:</td> 
                        <td colspan="2"> 
                            <input id="customId" type="text" name="Id" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td>Subject:</td> 
                        <td colspan="2"> 
                            <input id="subject" type="text" value="" name="Subject" onfocus="temp()" style="width: 100%" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td>Description:</td> 
                        <td colspan="2"> 
                            <textarea id="customdescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td>StartTime:</td> 
                        <td> 
                            <input id="StartTime" type="text" value="" name="StartTime" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td>EndTime:</td> 
                        <td> 
                            <input id="EndTime" type="text" value="" name="EndTime" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td colspan="3"> 
                            <div class="customcheck">AllDay:</div> 
                            <div class="customcheck"> 
                                <input id="allday" type="checkbox" name="AllDay" onchange="alldayCheck()" /> 
                            </div> 
                            <div class="customcheck">Recurrence:</div> 
                            <div> 
                                <input id="recurrence" type="checkbox" name="Recurrence" onchange="recurCheck()" /> 
                            </div> 
                        </td> 
                    </tr> 
                    <tr class="recurrence" style="display: none"> 
                        <td>Type:</td> 
                        <td> 
                            <select id="rType" name="freq"> 
                                <option value="daily">Daily</option> 
                                <option value="weekly">Weekly</option> 
                                <option value="monthly">Monthly</option> 
                                <option value="yearly">Yearly</option> 
                            </select> 
                        </td> 
                    </tr> 
                </tbody> 
            </table> 
        </form> 
        <div> 
            <button type="submit" onclick="cancel()" id="btncancel" style="float:right;margin-right:20px;margin-bottom:10px;">Cancel</button> 
            <button type="submit" onclick="save()" id="btnsubmit" style="float:right;margin-right:20px;margin-bottom:10px;">Submit</button> 
        </div> 
    </div> 
<div id="scheduleControl" > 
<ej-schedule id="Schedule1" width="100%" height="525px" currentView="week" currentDate="5/4/2014" 
   (appointmentWindowOpen)="onAppointmentWindowOpen($event)" 
   (cellClick)="onClick($event)" 
   [appointmentSettings.dataSource]=scheduleEvents  
  [appointmentSettings.applyTimeOffset]=applyTimeOffset 
  appointmentSettings.id="Id" 
  appointmentSettings.subject="Subject"  
  appointmentSettings.startTime="StartTime"  
  appointmentSettings.endTime="EndTime" 
  appointmentSettings.allDay="AllDay" 
  appointmentSettings.recurrence="Recurrence" 
  appointmentSettings.recurrenceRule="RecurrenceRule" > 
</ej-schedule> 
</div> 
 
</Code> 
 
Regards, 
Karthigeyan 



NA Navaseelan September 5, 2017 07:12 AM UTC

Hi,

i need to hide the month view and agenda .and also i want to disable the default popup to create appointment?


please help me on regard this.


thanks,

Navaseelan



KK Karthigeyan Krishnamurthi Syncfusion Team September 6, 2017 12:05 PM UTC

Hi Navaseelan, 
 
Thank you for contacting Syncfusion support. 
 
If your requirement is to display the custom window (by preventing the default detailed window), we have provided the sample in our previous update, kindly refer it. If your requirement is to hide the quick window, showQuickWindow API can be used as shown below and we have prepared the sample to customize the views which can be download from the below location. 
 
 
 
<Code> 
<ej-schedule id="Schedule1" width="100%" height="525px" currentView="customview" currentDate="5/4/2014" [views]=views 
  [showQuickWindow]=quickWindow 
  [appointmentSettings.dataSource]=scheduleEvents  
  [appointmentSettings.applyTimeOffset]=applyTimeOffset 
  appointmentSettings.id="Id" 
  appointmentSettings.subject="Subject"  
  appointmentSettings.startTime="StartTime"  
  appointmentSettings.endTime="EndTime" 
  appointmentSettings.allDay="AllDay" 
  appointmentSettings.recurrence="Recurrence" 
  appointmentSettings.recurrenceRule="RecurrenceRule" > 
</ej-schedule> 
export class ScheduleComponent { 
public views:any; 
    constructor(public northwindService: NorthwindService) { 
     this.applyTimeOffset = false; 
     this.quickWindow = false; 
     this.views=["Day", "Week", "WorkWeek"]; 
   } 
    public scheduleEvents=northwindService.getEvents();        
} 
</Code> 

Regards, 
Karthigeyan 


Loader.
Live Chat Icon For mobile
Up arrow icon