I've implemented zabuto calendar in my project. Here is the screen shot:
.
I want the color of date cell to be changed when clicked. Here is a part of my code:
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
cell_border: true,
today: false,
show_days: true,
weekstartson: 0,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
});
Here is onClick code.
myDateFunction(this.id);
function myDateFunction(id) {
var date = $("#" + id).data("date");
document.getElementById("#" + id).style.color = "blue";
}
$("#my-calendar").zabuto_calendar({
action: function () {
return myDateFunction(this.id, false);
},
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event"}
]
});
But this isn't working. How can I fix it?
Old post, but I've made a custom Zabuto calendar.
It's untested and lot's of features are missing but you should give it a peek:
$("#my-calendar").zabuto_calendar({
language: "fr",
year: 2015,
month: 1,
show_previous: 1,
show_next: 2,
// show_reminder: true,
// show_today: false,
// show_days: true,
// weekstartson: 0,
// nav_icon: {
// prev: '<i class="fa fa-chevron-circle-left"></i>',
// next: '<i class="fa fa-chevron-circle-right"></i>'
// },
callbacks: {
on_cell_double_clicked: function() {
return cellDoubleClicked(this);
},
on_cell_clicked: function() {
return cellClicked(this);
},
on_nav_clicked: function() {
return navClicked(this);
},
on_event_clicked: function() {
return eventClicked(this);
}
},
events: {
local: events_array,
ajax: {
url: "" // load ajax json events here...
}
},
legend: [
{label: "Rendez-vous", type: "appointment"},
{label: "Evenement A", type: "eventtype2"},
{label: "Evenement B", type: "eventtype3"},
{label: "<span class='fa fa-bell-o'></span> Rappel", type: "reminder"}
]
});
http://jsfiddle.net/n2gkm4d9/
(try double-click in day wrappers, simple-click on events)
Now with:
init calendar with local json + ajax data
call public methods (to add just one event at a time for example)
add event through a modal (not the modal included in zabuto calendar, I've removed it)
show a list of events of a day
...
It's only few hours of work, there's lot of features to add and things to do to make it stable but it's usable. ;-)
Look carefully to the code... there's much more than the fiddle show actually:
I think you should add a public method really easily to change the color of the cell.
Cheers
Fro
go through this http://zabuto.com/dev/calendar/examples/action.html. it contains your answer.
Related
I am using Kendo Menu bar to call javascript function on the click of Menu Item. But url of Kendo Menu is not rendering properly. Below is the code
function kendoMenu() {
$('#menu').kendoMenu({
//orientation: "vertical",
dataSource: [
{
text: "Export",
value: "newtransaction",
items: [
{
text: " Managers",
value: "managers",
url: "javascript:ImportExport('OFD')"
},
{
text: " Terms",
value: "terms",
url: "javascript:doImportExport('OFI')"
},
]
},
],
// select: onKendoMenuselect
});
}
But when i run the program, on the html side it is rendering as
<a class="k-link" href="javascript:ImportExport(" ofi')'=""> Terms</a>
But i want href to be rendered as:
<a class="k-link" href="javascript:ImportExport('ofi')"> Terms</a>
What should be the best approach?
Thanks for the help in advance.
Escape quotes inside string using backslash (\)
url: "javascript:ImportExport(\"OFD\")"
url: "javascript:doImportExport(\"OFI\")"
you can do that in select event try the code below.
$('#menu').kendoMenu({
//orientation: "vertical",
dataSource: [
{
text: "Export",
value: "newtransaction",
items: [
{
text: " Managers",
value: "managers"
},
{
text: " Terms",
value: "terms"
},
]
},
],
function onMenuSelect(ev) {
var selected=ev.item.textContent;
if(selected == "Managers"){
window.location.href='your url here';
}
else
{
and so on...
}
}
});
I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!
You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.
I have a kendo scheduler and I'm having a problem with move event. I can move only one event at a time and then I can't even grab any event afterwards. I think there's something wrong with the dates but I really can't figure out why. I tried dataSource with 2-3 events and it's working but when I put that exact same data in php and return it as json. It's not working.
Any help would be appreciated.
$("#scheduler").kendoScheduler({
date: new Date(),
startTime: new Date(today2()),
timezone: "Etc/UTC",
currentTimeMarker: false,
height: 800,
views:
[
"week",
{ type: "month", selected: true, eventHeight: 60}
],
dataSource:
{
transport:
{
read:
{
url: "tasks.php",
dataType: "json"
},
batch: true,
parameterMap: function (options, operation)
{
if (operation === "read") {
var scheduler = $("#scheduler").data("kendoScheduler");
var result =
{
start: scheduler.view().startDate(),
end: scheduler.view().endDate()
}
return kendo.stringify(result);
}
return kendo.stringify(options);
}
},
schema:
{
model:
{
id: "taskId",
fields:
{
taskId: { type: "number", from: "TT_CODE" },
start: { type: "date", from: "TT_START_DATETIME"},
end: { type: "date", from: "TT_END_DATETIME"},
title: { from: "TT_EDIT"}
}
}
}
}
});
php file with json data:
$json[0]['TT_CODE'] = 1;
$json[0]['TT_START_DATETIME'] = "2016-01-16 15:00:00";
$json[0]['TT_END_DATETIME']= "2016-01-16 16:00:00";
$json[0]['TT_EDIT'] = "Fast and furious 6";
echo json_encode($json);
Since you specified start and end as date in your model, the scheduler is expecting to received properly formatted date. While JSON passes date as string, javascript still expect the date string to be formatted.
In your case, it would be:
$json[0]['TT_CODE'] = 1;
$json[0]['TT_START_DATETIME'] = "2016-01-16T15:00:00.000Z";
$json[0]['TT_END_DATETIME']= "2016-01-16T16:00:00.000Z";
$json[0]['TT_EDIT'] = "Fast and furious 6";
You could also leave date as is and handle the string with a custom logic in the parameterMap function.
As a side note, if you have a doubt about the type formatting, go in the browser console and have a look at the network tab. You'll be able to compare the data sent by the working service to the data sent by PHP and see where is the difference.
I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode
See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}
"render": function ( data, type, full ) { return label;}
How can I develop a custom widget behaving like this sample:
http://jsfiddle.net/anilca/u2HF7/
Here is my kickstart reading, but I could not find out how to define the templates of dropdownlists and link them together by change events.
(function($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var Editable = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
options: {
name: "Editable",
value: " ",
editable: false
},
_create: function() {
var that = this;
// create dropdowns from templates and append them to DOM
},
_templates: {
dropDown: "?"
}
});
ui.plugin(Editable);
})(jQuery);
Following the blog you linked, simply do what he did - define your templates then create the drop-downs in your _create() function. It is not necessary to use the kendo.template() function on each drop down list, as it does not bind objects as well as you think it would. Instead, the key is to use kendo.bind() and pass in the options as your view model.
Here is a JsBin working example.
// listen for doc ready because this is js bin and my code is not really "in" the HTML
// where I can control it.
$(function() {
// wrap the widget in a closure. Not necessary in doc ready, but a good practice
(function($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
periods = [{ text: "PERIOD: YEAR", value: "YEAR" }, { text: "PERIOD: QUARTER", value: "QUARTER" }],
quarters = [{ text: "1. Quarter", value: 1 }, { text: "2. Quarter", value: 2 }, { text: "3. Quarter", value: 3 }, { text: "4. Quarter", value: 4 }],
years = [2011, 2012, 2013, 2014];
var LinkedDropDowns = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that._create();
},
options: {
name: "LinkedDropDowns",
period: "YEAR",
periods: periods,
year: 2011,
years: years,
yearVisible: true,
quarter: 1,
quarters: quarters,
quarterVisible: false,
onPeriodChange: function(e) {
switch(e.sender.value()) {
case "YEAR":
this.set("yearVisible", true);
this.set("quarterVisible", false);
break;
case "QUARTER":
this.set("yearVisible", true);
this.set("quarterVisible", true);
break;
default:
break;
}
},
onYearChange: function(e) {
alert(e.sender.value());
},
onQuarterChange: function(e) {
alert(e.sender.value());
}
},
_create: function() {
var that = this;
// create dropdowns from templates and append them to DOM
that.periodDropDown = $(that._templates.periodDropDown);
that.yearDropDown = $(that._templates.yearDropDown);
that.quarterDropDown = $(that._templates.quarterDropDown);
// append all elements to the DOM
that.element.append(that.periodDropDown)
.append(that.yearDropDown)
.append(that.quarterDropDown);
kendo.bind(that.element, that.options);
},
_templates: {
periodDropDown: "<input id='period' data-role='dropdownlist' data-text-field='text' data-value-field='value' data-bind='value: period, source: periods, events: { change: onPeriodChange }' />",
yearDropDown: "<input id='year' data-role='dropdownlist' data-bind='visible: yearVisible, value: year, source: years, events: { change: onYearChange }' style='width: 90px' />",
quarterDropDown: "<input id='quarter' data-role='dropdownlist' data-text-field='text' data-value-field='value' data-bind='visible: quarterVisible, value: quarter, source: quarters, events: { change: onQuarterChange }' style='width: 110px' />"
}
});
ui.plugin(LinkedDropDowns);
})(jQuery);
$('#dropdowns').kendoLinkedDropDowns();
});