schedule asp.net | ASP.NET Web Forms Forums

VS Velmurugan S Syncfusion Team June 18, 2015 12:15 PM UTC

Hi Michael,
Thanks for using Syncfusion products.

We have prepared a sample to meet your requirement “Schedule with data source from webservice and perform insert, update, delete operation”, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119417/ze/ScheduleSampleWebServices295977422

Also to apply the datasource to schedule control within the code behind page, Refer the following code snippet.

<code>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Dim loc As New localhost.WebService1

                Dim appointmentsData As DataTable
      appointmentsData = loc.BindAppointments()   ' Here we are calling the BindAppointments webservice method to read the data
            Schedule1.AppointmentSettings.DataSource = appointmentsData 'Here you need to pass the appointment value

End Sub

</code>
Please let us know if it helps and if you need any further assistance.

Note: In the above sample we have created the webservice called “WebService1.asmx” within the sample application and performed the CRUD operation.

Regards,
Velmurugan

MF Michael Fernandez June 18, 2015 05:53 PM UTC

Tank you i can't to execute your example but i understand all.

I try to assign the datatable to the Schedule with this code, I use this like a test for the datasource but this don't work i try algo without the Schedule 1.DataBind() and nothing. when i am debugging the code, the DataTable values is on Schedule 1.Appointment Settings.DataSource but in the Schedule i can't to view that

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Schedule1.AppointmentSettings.DataSource = cargardatos()
        Schedule1.DataBind()

    End Sub

    Private Function cargardatos() As DataTable
        Dim dt As DataTable
        dt = New DataTable()
        dt.Columns.Add("Id", Type.GetType("System.Int32"))
        dt.Columns.Add("Subject", Type.GetType("System.String"))
        dt.Columns.Add("Description", Type.GetType("System.String"))
        dt.Columns.Add("AllDay", Type.GetType("System.Boolean"))
        dt.Columns.Add("StartTime", Type.GetType("System.String"))
        dt.Columns.Add("EndTime", Type.GetType("System.String"))

        Dim dr As DataRow

        dr = dt.NewRow()
        dr("Id") = 1
        dr("Subject") = "Prueba"
        dr("Description") = "esto es una prueba"
        dr("AllDay") = False
        dr("StartTime") = "18-06-2015 15:30"
        dr("EndTime") = "18-06-2015 16:30"
        dt.Rows.Add(dr)

        Return dt

    End Function

Also i create in my code the Schedule Events and put a break point in these, later y run the Schedule and make the action but the event don't work and neither active the break point.

My question is: I need to active one or more properties in the control to use the event or what i make bad?

To finish I need to pass the Schedule to spanish because i am from Costa Rica and when i select lovcation es-ES the Schedule disappears. What i need to do if need the Schedule in Spanish.

Thanks.

VS Velmurugan S Syncfusion Team June 19, 2015 12:29 PM UTC

Hi Michael,
Thanks for your update.
Please find the following responses for your queries:
Query #1: I try to assign the datatable to the Schedule with this code, I use this like a test for the datasource but this don't work i try algo without the Schedule 1.DataBind() and nothing:

We suspect that this issue might have occurred due to the system date format. For example, if your system date format is MM/dd/yyyy and your passing value is 18-06-2015 10:30 means it will calculate and consider the date as Invalid Date. Because it will consider 18 as a month value and the result will be the Invalid Date. Hence, we suggest you to pass the StartTime, EndTime value based on the System Time Format (Ex: system format dd/MM/yyyy means 06/18/2015 10:30 as StartTime value and 06/18/2015 16:30:00 as EndTime value) values to overcome this issue. Please find the following code snippet to overcome this issue.

<code>
-----------------------------------
-----------------------------------

Dim dr As DataRow

dr = dt.NewRow()

dr("Id") = 1

dr("Subject") = "Prueba"

dr("Description") = "esto es una prueba"

dr("AllDay") = False

dr("StartTime") = "06/18/2015 15:30:00"

dr("EndTime") = "06/18/2015 16:30:00"

        dt.Rows.Add(dr)
        Return dt
        ------------------------
        ------------------------
</code>

Query #2: Also i create in my code the Schedule Events and put a break point in these, later y run the Schedule and make the action but the event don't work and neither active the break point:

The above mentioned issue might have occurred if “ej.webform.min.js” file not referred properly in your application, hence we request you to check whether the required script (ej.webform.min.js) is referred properly in your application to call/trigger the Server Side events. Please refer the following Code Snippets to know the necessary script reference to overcome the mentioned issue.

<code>
<link rel='nofollow' href="Content/ej/default-theme/ej.widgets.all.min.css" rel="stylesheet" />

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop">
</ej:Schedule>
</code>

Step 3: Refer the localization translation code within the Script under the “MainContent” block before the control declation. Refer the below code snippets.

<code>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

ej.Schedule.Locale["es-ES"] = {

ReminderWindowTitle: "Recordatorio ventana",

CreateAppointmentTitle: "crear cita",

RecurrenceEditTitle: "Editar repetida cita",

RecurrenceEditMessage: "¿Cómo le gustaría cambiar el evento de la serie?",

RecurrenceEditOnly: "Sólo este nombramiento",

RecurrenceEditSeries: "serie completa",

----------------------------------,

Gotodate: "Ir a la fecha",

Resources: "RESOURCES"

};

</script>

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop">

</ej:Schedule>
</asp:Content>

</code>

We have modified the sample with the above code snippet changes, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/119417/ze/ScheduleSampleWebServices1678813304

Please let us know if you need further assistance.

Note: We are able to run the provided sample in our end and also modified the same sample with the above code snippet and working fine in our end. Please try the above sample and revert back to us if it helped to meet your requirements or if you are facing any issues while running the sample with details like issues that you are facing and the essential studio version that you are using.
Also, if we misunderstood your query on event means kindly revert back to us with more details on whether you are expecting client side events or server side events and reason for expecting this event. Information provided will be helpful for us to understand your requirement further and provide you with solution.

Regards,
Velmurugan

MF Michael Fernandez June 24, 2015 04:27 PM UTC

Thank you so much for the help, my Schedule is now working in Spanish, with the WebService perfect.
Now I'm trying to create the events with differents colors depends of a table value.
have you an example to make this, i try to use the Categorize but the value to decide the color is not chosen in the Schedule. Is dependent from another process.

Thanks

SK Sarath Kumar P K Syncfusion Team June 25, 2015 02:20 PM UTC

Hi Michael,

Thanks for your update.

We have created the datatable as similar to appointment datatable for categorize collection and bind that categorize to appointment. Then bind the categorize collection with the appointment to apply the color to an appointment. Refer the following code snippets to apply the categorize to appointments.

<code>

Default.aspx.vb:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

Schedule1.AppointmentSettings.DataSource = cargardatos()

Schedule1.CategorizeSettings.DataSource = categorize() //Bind the categorize collection

End Sub

Private Function categorize() As DataTable //Here we are creating the DataTable to the Categorize value

Dim dt As New DataTable

dt.Columns.Add("Id", Type.GetType("System.Int32"))

dt.Columns.Add("Color", Type.GetType("System.String"))

dt.Columns.Add("FontColor", Type.GetType("System.String"))

dt.Columns.Add("Text", Type.GetType("System.String"))

Dim dr As DataRow

dr = dt.NewRow()

dr("Id") = 1 //Create one categorize collection for appointment

dr("Color") = "#e04343"

dr("FontColor") = "White"

dr("Text") = "Red Category"

dt.Rows.Add(dr)

Return dt

End Function

Private Function cargardatos() As DataTable

Dim dt As New DataTable

dt.Columns.Add("Id", Type.GetType("System.Int32"))

dt.Columns.Add("Subject", Type.GetType("System.String"))

dt.Columns.Add("Description", Type.GetType("System.String"))

dt.Columns.Add("AllDay", Type.GetType("System.Boolean"))

dt.Columns.Add("StartTime", Type.GetType("System.String"))

dt.Columns.Add("EndTime", Type.GetType("System.String"))

dt.Columns.Add("Categorize", Type.GetType("System.String"))

Dim dr As DataRow

dr = dt.NewRow()

dr("Id") = 1

dr("Subject") = "Prueba"

dr("Description") = "esto es una prueba"

dr("AllDay") = False

dr("StartTime") = "06/18/2015 15:30:00"

dr("EndTime") = "06/18/2015 16:30:00"

dr("Categorize") = "1" //Here we are adding the categorize value to an appointment

dt.Rows.Add(dr)

Return dt

End Function

Default.aspx:

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop">

<AppointmentSettings Id="Id" Subject="Subject" AllDay="AllDay" StartTime="StartTime" EndTime="EndTime" Description="Description" Categorize="Categorize"/> <%--Here we are mapping the table fields to the schedule--%>
</ej:Schedule>
</code>

We have modified the sample with the above code snippet changes to meet your requirement which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/119417/ze/CategorizeScheduleSample-773853853

Note: If we misunderstood your requirement kindly revert back to us with some more information about your requirement like how to bind the categorize collection to appointments (By using the SQL database table or else something different from this), the information provided by you is more helpful for us to understand your requirement and provide you a possible solution.

Regards,
Sarath Kumar P K

MF Michael Fernandez July 2, 2015 04:12 PM UTC

Thank you so much for your help, today my Schedule is very efficient.

I have two new request:
can I use the categories in the appointment without showing this options in the new event window?, the idea is that the user don´t be able to change the cathegory because the cathegory is decide for another user

Also i am trying to use the context menu to load a guest list for every appointment, my plan is use a context option to show this list but when I enable the context menu options in the Schedule automatically some options of the control has been deactivated for example decide between Day, Week, Work Week and month

I saw when this options are default in the context cells context menu but that is not functional for me i need to use the context menu and the originals Schedule options.
Or another event when i can use for my objective different to ServerAppointmentClick, ServerAppointmentDelete, ServerAppointmentEdited and ServerAppointmentSaved.

I need an option like ServerAppointmentDobleClick or similar because the guest list is from every Appointment

VS Velmurugan S Syncfusion Team July 3, 2015 12:37 PM UTC

Hi Michael,
Thanks for your update.
Please find the following responses for your queries:

Query #1: can I use the categories in the appointment without showing this options in the new event window?

You can meet your above mentioned requirement. Please find the following code snippets that will help you to meet this requirement.

<code>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

function onCreate(){

$("#" + this._id + "summary").next().css("display","none"); // Here the this._id will be the schedule control id

}

</script>

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop" Create="onCreate">

------------------------------------

-----------------------------------

</ej:Schedule>

</asp:Content>

</code>

Query #2: context menu to load a guest list for every appointment:

You can add the “n number of custom menu items in the ContextMenu” also “can remove (hide) the default context Menu items”. Please refer our online help document from the following link to know about our context menu feature.

http://help.syncfusion.com/ug/js/Documents/contextmenu4.htm

We have modified the sample with the “Context Menu ( Items specified in the above document)”. Please find the following code snippets to add the ContextMenu with the custom menu items and custom menu items actions. And you need to write the action for the custom menu items click within the “MenuItemClick” event.

<code>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

function onMenuItemClick(args) {

if (args.events.ID == "serverappointmentedited") {

// Here you can write your own logic to meet your requirement

alert("appointment Server Appointment Edited clicked");

}

if (args.events.ID == "servercellclicked") {

// Here you can write your own logic to meet your requirement

alert("Server Cell Clicked");

}

</script>

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop" Create="onCreate" MenuItemClick="onMenuItemClick">

<ej:Appointment Id="open" Text="Open Appointment" />

<ej:Appointment Id="delete" Text="Delete Appointment" />

<ej:Appointment Id="serverappointmentedited" Text="Server Appointment Edited" />

<ej:Appointment Id="serverappointmentclicked" Text="Server Appointment Clicked" />

<ej:Appointment Id="categorize" Text="Categorize" />

</AppointmentCollection>

<ej:Cells Id="new" Text="New Appointment" />

<ej:Cells Id="recurrence" Text="New recuring Appointment" />

<%--we have commented the following items and these items will not display in the contextmenu while right click on the celll--%>

<%--<ej:Cells Id="settings" Text="Settings"/>

<ej:Cells Id="view" Text="view" ParentId="settings"/>

<ej:Cells Id="timemode" Text="Time Mode" ParentId="settings"/>

<ej:Cells Id="view_Day" Text="Day" ParentId="view"/>

<ej:Cells Id="view_Week" Text="Week" ParentId="view"/>

<ej:Cells Id="view_Workweek" Text="Workweek" ParentId="view"/>

<ej:Cells Id="view_Month" Text="Month" ParentId="view"/>

<ej:Cells Id="timemode_Hour12" Text="12 Hours" ParentId="timemode"/>

<ej:Cells Id="timemode_Hour24" Text="24 Hours" ParentId="timemode"/>

<ej:Cells Id="businesshours" Text="Business Hours" ParentId="settings"/>--%>

<ej:Cells Id="servercellclicked" Text="Server Cell Clicked"/>

<ej:Cells Id="servercelldoubleclicked" Text="Server Cell Double Clicked"/>

</CellsCollection>

</MenuItems>

</ContextMenuSettings>

</ej:Schedule>
</asp:Content>

</code>
Please find the sample from the following location modified with the above code snippets.

http://www.syncfusion.com/downloads/support/forum/119417/ze/ScheduleSampleWithContextMenu1058299113

Please let us know if it helps and if you need any further assistance.

Note: If we misunderstood your requirement kindly revert back to us with some more information about your requirement like how do you expecting the context menu option or your requirement is binding the context menu items dynamically based on the appointment/cell right click , the information provided by you is more helpful for us to understand your requirement and provide you a possible solution.

Regards,
Velmurugan

MF Michael Fernandez July 8, 2015 05:21 PM UTC

thanks,

Now I found the Context menu error problem in my Schedule: if i am running my project with IIS express the context menu work fine but when i am use the IIS complete a lot of functionalities of the Schedule doesn't work anymore.

Well now i am using IIS Express and my query in this moment is the next:
I need to show a hidden panel with an option of my context menu and get a lot of values of the Appointment to show in this panel like labels because I use than to create a list of guests for the Appointment.

I was using the serverappointmentclicked for this and was working good but i couldn't use the other click options of the schedule like delete or edit appointment.
In this moment i am using the click options for: create appointment, edit appointment and delete appointment and that is working excellent, also I create an other context menu item for show the hidden panel and edit the guests list.

In your example you show me as call a javascript function and is good but, i need to call a visual basic function and get the appointments values.

This is the function when i used to show the guest list.

    Private Sub Schedule1_ServerAppointmentClick(sender As Object, e As Syncfusion.JavaScript.Web.ScheduleEventArgs)
        Try
            Arguments = TryCast(e.Arguments("appointment"), Dictionary(Of String, Object))
            Dim list = TryCast(Arguments, Dictionary(Of String, Object))
            Dim Descripcion As String = If(list.ContainsKey("Descripcion_Reservacion") = False, "", list("Descripcion_Reservacion").ToString())
            ObtenerListaInvitados(Session("Login").ToString, Session("Password").ToString, HttpUtility.HtmlDecode(dgvAreasComunes.SelectedRow.Cells(1).Text),   HttpUtility.HtmlDecode(dgvAreasComunes.SelectedRow.Cells(2).Text), list("ID").ToString())
            If Not DSInvitados Is Nothing Then
                If DSInvitados.Tables(0).Rows.Count > 0 Then
                    dgvInvitadosReservacion.DataSource = DSInvitados.Tables(0)
                    dgvInvitadosReservacion.DataBind()
                    For x As Integer = 0 To dgvInvitadosReservacion.Rows.Count - 1
                        Dim ddlTipoRevision As DropDownList = dgvInvitadosReservacion.Rows(x).Cells.Item(4).FindControl("ddlTipoRevision")
                        ddlTipoRevision.SelectedValue = DSInvitados.Tables(0).Rows(x).Item(10).ToString
                        ddlTipoRevision.Enabled = False
                    Next
                Else
                    ListaInvitadosVacia()
                End If
            Else
                ListaInvitadosVacia()
            End If
            PanelInvitados.Visible = True
            PanelDayPilot.Height = 400
            Schedule1.Height = "390px"
            lblDescripcionEvento.Text = Descripcion
            lblIdReservacion.Text = list("ID").ToString()
        Catch ex As Exception
            MostrarMensaje("Error al mostrar lista de Invitados")
        End Try
    End Sub

This code works very fine but i need to call this function in a context menu option, these is my Schedule and the function onMenuItemClick

                                        <ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" Create="onCreate" Height="640px" Width="800" MenuItemClick="onMenuItemClick">
                                            <ContextMenuSettings Enable="true">
                                            <MenuItems>
                                                <AppointmentCollection>
                                                    <ej:Appointment Id="open" Text="Modificar Evento" />
                                                    <ej:Appointment Id="delete" Text="Eliminar Evento" />
                                                    <ej:Appointment Id="serverappointmentclicked" Text="Lista de Invitados" />
                                                </AppointmentCollection>
                                                <CellsCollection>
                                                    <ej:Cells Id="new" Text="Nuevo Evento"/>
                                                </CellsCollection>
                                            </MenuItems>
                                            </ContextMenuSettings>
                                            <TimezoneCollection ID="TimezoneCollection1" Text="text" Value="value">
                                            </TimezoneCollection>
                                            <CategorizeSettings TableName="Estado" Enable="true" AllowMultiple="false" Id="Id" Color="Color" FontColor="FontColor" Text="Text"></CategorizeSettings>
                                            <AppointmentSettings ID="ID" AllDay="AllDay" Categorize="Estado" Description="Comentarios" EndTime="Fecha_Final" StartTime="Fecha_Inicio" Subject="Descripcion_Reservacion" />
                                        </ej:Schedule>

                                        function onMenuItemClick(args) {
                                            if (args.events.ID == "serverappointmentclicked")
                                            {
                                                alert("this is working but i need call the vbScript function")
                                            }
                                        }

Thans for all your help...

VS Velmurugan S Syncfusion Team July 9, 2015 12:37 PM UTC

Hi Michael,
Your requirement on “call a visual basic function instead of the JavaScript function when the context menu Item Click” can be achieved with the following code snippets that will help you to trigger the “visual basic function while the menu item click”.

<code>

Default.aspx:

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop" Create="onCreate" OnServerMenuItemClick="Schedule1_ServerMenuItemClick">

<ej:Appointment Id="open" Text="Modificar Evento" />

<ej:Appointment Id="delete" Text="Eliminar Evento" />

<ej:Appointment Id="serverappointmentclicked" Text="Lista de Invitados" />

</AppointmentCollection>

<ej:Cells Id="new" Text="Nuevo Evento" />

</CellsCollection>

</MenuItems>

</ContextMenuSettings>

<%--Here we are mapping the table fields to the schedule--%>
</ej:Schedule>

Default.aspx.vb:

Protected Sub Schedule1_ServerMenuItemClick(sender As Object, e As Syncfusion.JavaScript.Web.ScheduleEventArgs)

Arguments = TryCast(e.Arguments, Dictionary(Of String, Object))

Dim list = TryCast(Arguments, Dictionary(Of String, Object))

Dim appointment = list("targetInfo") 'Here you can get the appointment details

Dim selectedValue = list("events") 'Here you can get the events details like which item is clicked and its text value

If String.Equals(selectedValue("ID").ToString(), "serverappointmentclicked") Then ' Similarly you can check the condition for other menu items click (ex: delete appointment)

' you can write your code here to meet your requirement

Dim val = selectedValue("ID").ToString() ' Here just stored the clicked menu item Id in the variable

End If

End Sub

</code>

We have modified (added the context menu items mentioned in the code snippet given by you) the sample with the above code snippet, which can be downloaded from the following location:

http://www.syncfusion.com/downloads/support/forum/119417/ze/ScheduleSampleWebServicesWithServerMethod625038303

Please let us know if it helps and if you need any further assistance.

Note: If we misunderstood your requirement, kindly get back to us with some more information on your requirements such as what is hidden panel and how do you expect to add in the context menu, whether you are using multiple (different set) context menu item, what are the issues that you are facing while using the sample in IIS Complete. Also share the screenshots of the issue if possible. The information provided by you will be helpful for us to understand your requirement and provide you the possible solution.

Regards,
Velmurugan

MF Michael Fernandez July 10, 2015 06:10 PM UTC

Thanks my Schedule now is perfect.

I have a last Query, I am trying to use the tooltip but i write the message in de property and this don´t show in the schedule, i need to enable an option or a property?

Thank you so much

VS Velmurugan S Syncfusion Team July 13, 2015 12:32 PM UTC

Hi Michael,

Thanks for your update.

We regret to let you know that, currently we do not have default tooltip option in our Schedule. Therefore, we have already logged the feature report for this requirement and it will be included in any of our upcoming releases.

For now, we have achieved your requirement for “displaying tooltip on the schedule” with the following workaround code snippets (using “CellHover” and “AppointmentHover” method) that will help you to display the appropriate tooltip messages while mouse hovering on the cell and appointment.

<code>

function showCellTooltip(args) {

if (args.currentDate.toString() != "Invalid Date") {

// We are displaying the current date while hover the cell

if ($('div.tooltip').length == 0) {

$('<div class="tooltip">' + args.currentDate.getDate() + "/" + args.currentDate.getMonth() + "/" + args.currentDate.getFullYear() + ' </div>').appendTo('body');

}

else {

$('div.tooltip').text(args.currentDate.getDate() + "/" + args.currentDate.getMonth() + "/" + args.currentDate.getFullYear());

}

var tooltipX = event.pageX;

var tooltipY = event.pageY;

$('div.tooltip').css({ top: tooltipY, left: tooltipX });

}

function showAppointmentTooltip(args) {

var element = $("#MainContent_Schedule1").find("#Appointment_" + args.appointment.Id); // We are getting the appointment element in this code to set the tooltip position

// We are displaying the appointment subject while hover the appointment

if ($('div.tooltip').length == 0) {

$('<div id="scheduleToolTip" class="tooltip">' + args.appointment.Subject + ' </div>').appendTo('body');

}

else {

$('div.tooltip').text(args.appointment.Subject);

}

$('div.tooltip').css({ top: element.offset().top, left: element.offset().left+15 });

}

</script>

<style>

/*This style value to display the tooltip*/

.tooltip {

margin: 8px;

padding: 8px;

border: 1px solid blue;

background-color: green;

position: absolute;

z-index: 2;

}

</style>

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop" Create="onCreate" OnServerMenuItemClick="Schedule1_ServerMenuItemClick" AppointmentHover="showAppointmentTooltip" CellHover="showCellTooltip">

</ej:Schedule>

</code>

We have modified the sample with the above code snippet, which can be downloaded from the following location:

http://www.syncfusion.com/downloads/support/forum/119417/ze/ScheduleSampleWithTooltip921710809

Please let us know if it helps and also, if you need any further assistance.

Regards,
Velmurugan

MF Michael Fernandez July 13, 2015 03:02 PM UTC

Thanks, I am trying to incorporate this in my code but it don´t worked, also I downloaded your example and neither work, i am using Version=13.1450.0.21 because your examples come with Version=13.1450.0.30 but this don´t works for me I don´t know if it will be a problem but in this case how i can to update my version?

VS Velmurugan S Syncfusion Team July 14, 2015 08:52 AM UTC

Hi Michael,
We regret for the inconvenience caused.

We have implemented and included the “CellHover” and “AppointmentHover” methods in our Volume 1, 2015 service pack release (13.1.0.30) only, hence the previously given code snippets doesn’t work in your version 13.1.0.21.

Still we can meet your requirement “displaying tooltip on the schedule” without using the above methods. For that, we request you to refer the following workaround code snippets (without using “CellHover” and “AppointmentHover” method) that will help you to display the tooltip messages while mouse hovering on the cell and appointment.

<code>

var data;

function onCreate() {

data = this._processed;

// Here we are binding the events to trigger while hover the cell/appointment

this._on(this.element, "mouseover", "td.e-workcells,td.e-monthcells", _mouseover);

this._on(this.element, "mouseover", "div.e-appointment,div.e-monthappointment", _appmouseover);

this._on(this.element, "mouseleave", ".e-appointment,.e-monthappointment", function (args) {

$('div.tooltip').remove();

});

}

var cellIndex;

function _mouseover(args) { // This function will trigger while mouse hover the cell

cellIndex = ($(args.target).hasClass("e-workcells") || $(args.target).hasClass("e-alldaycells")) ? $(args.target).index() : 7 - ((parseInt($(args.target).index() / 7) + 1) * 7 - $(args.target).index()) + ($(args.target).parent().index() * 7);;

var date = new Date(this._dateRender[cellIndex]);

if ($('div.tooltip').length == 0)

$('<div class="tooltip">' + date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear() + ' </div>').appendTo('body');

else

$('div.tooltip').text(date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear());

changeTooltipPosition(args);

}

function _appmouseover(args) { // This function will trigger while mouse hover the appointment

if ($(args.currentTarget).hasClass("e-appointment") || $(args.currentTarget).hasClass("e-monthappointment")) {

var id = parseInt($(args.currentTarget).attr("id").split("_")[1]);

var appointment = new ej.DataManager(data).executeLocal(new ej.Query().where(this.model.appointmentSettings["id"], ej.FilterOperators.equal, id))[0];

if ($('div.tooltip').length == 0)

$('<div class="tooltip">' + appointment.Subject + ' </div>').appendTo('body');

else

$('div.tooltip').text(appointment.Subject);

}

changeTooltipPosition(args);

return false;

}

var changeTooltipPosition = function (event) {

var tooltipX = event.pageX - 8;

var tooltipY = event.pageY + 8;

$('div.tooltip').css({ top: tooltipY, left: tooltipX });

};

</script>

<style>

/*This style value to display the tooltip*/

.tooltip {

margin: 8px;

padding: 8px;

border: 1px solid blue;

background-color: green;

position: absolute;

z-index: 2;

}
</style>

<ej:Schedule ID="Schedule1" runat="server" Locale="es-ES" OnServerAppointmentSaved="Schedule1_ServerAppointmentSaved" OnServerAppointmentEdited="Schedule1_ServerAppointmentEdited" OnServerAppointmentDeleted="Schedule1_ServerAppointmentDeleted" OnServerResizeStop="Schedule1_ServerResizeStop" OnServerDragStop="Schedule1_ServerDragStop" Create="onCreate" OnServerMenuItemClick="Schedule1_ServerMenuItemClick" Navigation="onCreate">

---------------------------------------

---------------------------------------
</ej:Schedule>

</code>

We have modified the sample with the above code snippet, which can be downloaded from the following location:

http://www.syncfusion.com/downloads/support/forum/119417/ze/ScheduleSampleWithTooltipModified343535969

Also, we request you to refer the following link to download our latest Essential Studio Version (Volume 2, 2015).
http://www.syncfusion.com/forums/119549/essential-studio-2015-volume-2-final-release-v13-2-0-29-available-for-download

Please let us know if it helps and also, if you need any further assistance.
Regards,
Velmurugan

MF Michael Fernandez July 14, 2015 02:43 PM UTC

Thanks for your help.

your help was very important for the project

VS Velmurugan S Syncfusion Team July 15, 2015 12:40 PM UTC

Hi Michael,
Thanks for your update.
We are glad to hear that the solution provided by us helped you to meet your requirement.
Please let us know, if you require any further assistance. As always, we will be happy to assist you.
Regards,
Velmurugan