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

Used as a basic Calendar

Is there a way to use this calendar to just show as a basic calendar, and allow us to add hyperlinks and images as desired?

We want to use it without the "Appointment" feature. Just a calendar. Primarily in Month view.

7 Replies

VS Velmurugan S Syncfusion Team January 21, 2015 07:16 AM UTC

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




DS Destyn Stringham January 21, 2015 02:29 PM UTC

The calendar looks great in the view you specified.

We want to be able to add items to the calendar, that when clicked send the user to a new page. A hyperlink.
We would also like to insert an image with that item. These are small graphics, to enhance the look of their item.

The only view that would be used is the Month view.


VS Velmurugan S Syncfusion Team January 22, 2015 09:08 AM UTC

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,

Velmurugan


DS Destyn Stringham January 22, 2015 03:15 PM UTC

In your example. When you click on "Meeting", it opens up the appointment. I do not want it to open anything. I want the word "Meeting" to be a hyperlink that sends them to the URL in the hyperlink.

Can you specify where in the calendar day cell that the image should appear? 
Can you move it to different locations? Make it appear in the top left, or top right, or bottom left / bottom right?


VS Velmurugan S Syncfusion Team January 23, 2015 10:19 AM UTC

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




DS Destyn Stringham January 23, 2015 02:31 PM UTC

I think we almost have it, just one thing. When you click on that hyperlink it still opens up the appointment popup. I do not want those to appear, at all. 

I also wanted it to open in the same window, so I removed the "target='_blank'" from the <a> tag in the script. And that works, except before launching the hyperlink, it opens the appointment balloon briefly before.

I do not want the appointment balloon to appear. How do I turn that off?


UM Uma Maheswari C Syncfusion Team January 26, 2015 05:53 AM UTC

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



Loader.
Live Chat Icon For mobile
Up arrow icon