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.
Unfortunately, activation email could not send to your email. Please try again.

Angular 2 Scheduler Appointment Customization

Thread ID:

Created:

Updated:

Platform:

Replies:

129172 Mar 2,2017 02:13 AM Sep 6,2017 08:05 AM Angular 3
loading
Tags: ejSchedule
John Dui
Asked On March 2, 2017 02:13 AM

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 08:17 AM

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 03:12 AM

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 08:05 AM

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.

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.

;