BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
Hi Destyn,
Thanks for using Syncfusion products.
We can use the schedule control as a basic calendar without rendering the appointments. Please find the following code snippet to create the basic schedule control.
<Code>
@{
List<string> views = new List<string>() { "Day","Week","WorkWeek","Month" }; // You can specify the required views in this list
}
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.Views(views) // Here we are passing the views collection to the schedule control
.CurrentView(CurrentView.Month) // This will set the default schedule view as Month view
.EnableAppointmentNavigation(false)
)
</Code>
We have also prepared a sample to meet your requirement “ without appointment feature and in Month view”, which can be downloaded from the following location:
http://www.syncfusion.com/downloads/support/directtrac/118006/BasicScheduleSample-435623482.zip
And kindly share some more information about your requirement “allow us to add hyperlinks and images as desired?” like where (within schedule or outside the schedule control and access/use the links/images within the schedule) from schedule you need to add the hyperlinks or images, which is more helpful for us to analyse and provide you the better solution.
Please let us know if it helps and any further assistance on this.
Regards,
Velmurugan
Hi Destyn,
Thanks for your update.
Your requirement can be acheived with the “Appointment Template Support” and we have prepared a sample for the same, which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/directtrac/118006/BasicScheduleSample-855259323.zip
In the above sample, we have displayed the “normal images for some days appointment and hyper link for some day appointment ”. And when we click over the hyper link it redirects to its corresponding given link. Please find the following code snippets that we have used in the above sample.
<code>
<style>
.e-monthappointment
{
height:auto !important;
}
</style>
<script id="MyTemplate" type="text/x-jsrender">
<div style="height: 100%">
<div style="float: left; width: 50px;">
{{:~format(StartTime)}}
</div>
<div>
<div>{{:Subject}}</div>
</div>
</div>
</script>
<script>
function _getImages(date) {
switch (new Date(date).getDay()) {
case 0:
return "<img src='../Images/schedule/cake.png'/>"
break;
case 1:
return "<img src='../Images/schedule/basketball.png'/>"
break;
case 2:
return "<img width='50px' height='50px' src='../Images/google.jpg'/>"
break;
case 3:
return "<img src='../Images/schedule/guitar.png'/>"
break;
case 4:
return "<img src='../Images/schedule/music.png'/>"
break;
case 5:
return "<a rel='nofollow' href='http://www.yahoo.com' target='_blank'> <font color='White'> Yahoo </font> </a>"
break;
case 6:
return "<img src='../Images/schedule/beach.png'/>"
break; }
}
$.views.helpers({ format: _getImages });
</script>
MVC- Razor:
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.Views(views) // Here we are passing the views collection to the schedule control
.CurrentView(CurrentView.Month) // This will set the default schedule view as Month view
.EnableAppointmentNavigation(false)
.CurrentDate(new DateTime(2014,6,2))
.AppointmentTemplateId("#MyTemplate")
.AppointmentSettings(fields => fields.Datasource(Model) // We need to add this “Appointment Settings to display the appointments in the schedule control
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
</code>
Please let us know if it helps and any further assistance on this.
Note: We have prepared the above sample and provided the above details based on the understanding of your requirement “add items (appointments) to the calendar and image and hyperlink with the item”. Therefore, if we misunderstood your requirements, kindly revert back to us with some clear information about your requirements, which is helpful for us provide the possible and better solution.
Regards,
Hi Destyn,
Thanks for your update.
You can meet the requirement “the word Meeting to be a hyperlink that sends them to the URL in the hyperlink” by using the following code snippet.
<Code>
<script id="MyTemplate" type="text/x-jsrender">
<div style="height: 100%">
{{:~format(StartTime)}}
<div style="float: left">
<div><a rel='nofollow' href='http://www.yahoo.com' target='_blank'> <font color='White'>{{:Subject}}</font></a></div> @*here we can make the subject as a hyperlink and it will displayed in the appointment and redirects to its corresponding link*@
</div>
</div>
</script>
</Code>
And also we suspect that you are expecting to “we need to specify the position of the images for each appointment and based on the specified position images need to render within the appointment” in the below mentioned scenario.
1. Can you specify where in the calendar day cell that the image should appear?
2. Can you move it to different locations? Make it appear in the top left, or top right, or bottom left / bottom right?
Therefore, we suggest you to “add the class to the img element and within defined class you can position the image with CSS style properties”. Please find the following code snippets to meet this requirement.
<Code>
<script id="MyTemplate" type="text/x-jsrender">
<div style="height: 100%">
{{:~format(StartTime)}} @*here we need to define this directly*@
<div style="float: left">
<div><a rel='nofollow' href='http://www.yahoo.com' target='_blank'> <font color='White'>{{:Subject}}</font></a></div> </div>
</div>
</script>
<script>
function _getImages(date) {
switch (new Date(date).getDay()) {
case 0:
return "<img class='day1' src='../Images/schedule/cake.png'/>"
break;
case 1:
return "<img class='day2' src='../Images/schedule/basketball.png'/>"
break;
case 2:
return "<img class='day3' src='../Images/google.jpg'/>"
break;
case 3:
return "<img class='day4' src='../Images/schedule/guitar.png'/>"
break;
case 4:
return "<img class='day5' src='../Images/schedule/music.png'/>"
break;
case 5:
return "<img class='day6' src='../Images/schedule/bell.png'/>"
break;
case 6:
return "<img class='day7' src='../Images/schedule/beach.png'/>"
break;
}
}
$.views.helpers({ format: _getImages });
</script>
<style>
.day1 {
float:right;
}
.day2 {
float:left;
}
.day3 {
float:right;
width:50px;
height:50px;
}
.day4 {
position: relative;
height: 50px;
top: 8px;
left: -43px;
}
.day5 {
float:right;
}
.day6 {
position: relative;
height: 50px;
top: 8px;
left: 15px;
}
.day7 {
float:right;
}
</style>
</Code>
Note: If we misunderstood your requirement, kindly revert back to us with some more information about your requirements like “what you are mentioning in the calendar day cell” and “where do you need to place the image either in calendar cell or in appointment cell”.
We have also modified the sample with the above mentioned code snippets, which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/directtrac/118006/BasicScheduleSample-1885988067.zip
Please let us know if it helps and any further assistance on this.
Regards,
Velmurugan
Hi Destyn,
Thanks for your update.
To turn off the appointment popup that opens up while single clicking on the appointments, set the property “ShowQuickWindow” of the schedule control to false. Please refer the below highlighted code snippet, that sets the ShowQuickWindow property to false.
<code>
@(Html.EJ().Schedule("Schedule1")
.Width("100%")
.Height("525px")
.EnableAppointmentNavigation(false)
.CurrentDate(new DateTime(2014,6,2))
.AppointmentTemplateId("#MyTemplate")
.ShowQuickWindow(false)
.AppointmentSettings(fields => fields.Datasource(Model)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
</code>
Note: Since the quick appointment popup has been turned off now with the above highlighted code, therefore in order to create new appointments, the required schedule cells needs to be double clicked – which will open the default appointment window.
Kindly check with the above code and let us know, if it helps and also if you need any further assistance.
Regards,
C. Uma Maheswari