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.
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
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" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jsrender.min.js"></script>
<script src="Scripts/jquery.easing-1.3.min.js"></script>
<script src="Scripts/jquery.globalize.min.js"></script>
<script src="Scripts/ej/ej.web.all.min.js"></script>
<script src="Scripts/ej/ej.webform.min.js"></script>
</code>
Query #3: 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:
You can set the “Spanish localization to Schedule control”. Please find the following steps to apply the localization to schedule control.
Step 1: Add the necessary globalize.min.js and corresponding culture (Ex: Spanish - globalize.culture.es-ES.min.js) file. Please refer the following code snippet to add the reference on this file.
<code>
<link rel='nofollow' href="Content/ej/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jsrender.min.js"></script>
<script src="Scripts/jquery.easing-1.3.min.js"></script>
<script src="Scripts/jquery.globalize.min.js"></script>
<script src="Scripts/ej/globalize.culture.es-ES.min.js"></script> <%--This script is necessary to apply the spanish culture--%>
<script src="Scripts/ej/ej.web.all.min.js"></script>
<script src="Scripts/ej/ej.webform.min.js"></script>
</code>
Step 2: Set the value to the Schedule control locale property. Refer the following code snippets to set the locale property value.
<code>
<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">
<script type ="text/javascript">
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
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">
<CategorizeSettings Enable="true" AllowMultiple="false" Id="Id" Color="Color" FontColor="FontColor" Text="Text"></CategorizeSettings>
<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
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script type ="text/javascript">
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">
<script type ="text/javascript">
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">
<CategorizeSettings Enable="true" AllowMultiple="false" Id="Id" Color="Color" FontColor="FontColor" Text="Text"></CategorizeSettings>
<ContextMenuSettings Enable="true">
<MenuItems>
<AppointmentCollection>
<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>
<CellsCollection>
<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>
<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>
</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
<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">
<CategorizeSettings Enable="true" AllowMultiple="false" Id="Id" Color="Color" FontColor="FontColor" Text="Text"></CategorizeSettings>
<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>
<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>
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
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>
<script type="text/javascript">
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
<script type="text/javascript">
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:
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
