Hello,
How can I get the selected month from a kendoCalendar??
the kendoCalendar it is in a window partialview:
<table class="table table-responsive">
<tr>
@*<td style="vertical-align: initial; padding-right: 100px;">
<input id="picker" />
</td>*@
<td>
<img src="~/Content/calendar.png" class="img-responsive" />
</td>
<td>
<div id="calendar"></div>
</td>
</tr>
<tr>
<td>
<button align="right" id="btnAddMonth" class="k-primary" onclick="SaveMonth();" style="height:2em;width:auto">Salveaza</button>
</td>
</tr>
</table>
i have this code behind:
$(function() {
var listaZile=[];
var today = new Date();
//data source
var selectedDates = [today.getDate() ];
//Calendar with multiselection
initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());
});
function initCalendar(calendar, selectedDates, onUpdate) {
var kendoCalendar = calendar.data('kendoCalendar');
kendoCalendar.bind('navigate', function() {
setTimeout(function() {
updateCalendar(calendar, selectedDates);
}, 0);
});
updateCalendar(calendar, selectedDates);
calendar.on('click', function(event) {
var cell = $(event.target).closest('td');
var isClickedOnDayCell = cell.length !== 0 && isDayCell(cell);
if (isClickedOnDayCell) {
var date = dateFromCell(cell).getDate();
var isDateAlreadySelected = selectedDates.some(function(selected) {
return selected === date;
});
if (isDateAlreadySelected) {
selectedDates.splice(selectedDates.indexOf(date), 1);
} else {
selectedDates.push(date);
listaZile.push(date); //this return days selected!!!
}
updateCell(cell, selectedDates);
if (onUpdate !== undefined) {
onUpdate();
}
}
});
}
function updateCalendar(calendar, selectedDates) {
calendar.find('td > a').parent().each(function(i, item) {
var cell = $(item);
if (isDayCell(cell)) {
updateCell(cell, selectedDates);
}
});
}
function updateCell(cell, selectedDates) {
var isCellSelected = selectedDates.some(function(selected) {
return selected === dateFromCell(cell).getTime();
});
if (isCellSelected) {
cell.addClass('selected');
} else {
cell.removeClass('selected');
}
}
function isDayCell(cell) {
return /^\d{1,2}$/.test(cell.find('a').text());
}
function dateFromCell(cell) {
return new Date(convertDataValue(cell.find('a').attr('data-value')));
}
//convert from 'YYYY/MM/DD', where MM = 0..11
function convertDataValue(date) {
var regex = /\/(\d+)\//;
var month = +date.match(regex)[1] + 1;
return date.replace(regex, '/' + month + '/');
}
The save function :
<script type="text/javascript">
function SaveMonth() {
iMonth = document.getElementById('calendar_cell_selected').textContent;
//var month=iMonth
alert(iMonth);
var year = 2017;
debugger;
var url = '@Url.Action("Adauga", "Calendar")';
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: { listZile: listZile, iMonth: iMonth, iYear: year },
success: function (data, status) {
//$("#AdaugaL").html("")
$("#AdaugaL").html("");
var wnd = $("#AdaugaL").data("kendoWindow");
wnd.close();
$("#GridProgramLucru").data("kendoGrid").dataSource.read();
$("#GridProgramLucru").data("kendoGrid").refresh();
},
error: function (result) {
debugger;
},
})
}
</script>
P.S I attached a view of my calendar window. the get value from month selection is undefined.
Thank you.