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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular 2 Scheduler Appointment Customization

Thread ID:

Created:

Updated:

Platform:

Replies:

129172 Mar 2,2017 07:13 AM UTC Sep 6,2017 12:05 PM UTC Angular 3
loading
Tags: ejSchedule
John Dui
Asked On March 2, 2017 07:13 AM UTC

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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Navaseelan
Replied On 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


Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


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.

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

;