I have my Calendar with onChange function and i'd like to create onSelect function.

At my onChange i create a kendo window to show a message.

This should also happen at onSelect.

-Click element.
-Go to onchange

-Open the window

-Close window
-I click on the same item and it does not open (onSelect is not implemented)

Calendar don't have select event.

How can i do this?

I want the calendar to display 3 months instead of 1. 

Also, the user should be able to multi select the dates in these 3 months.

What is the way to implement this?

Thanks.

Hi Telerik,

Is it possible to set the width of event A to 80% and width of event B to 20% ?

Thanks

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.

Hello,

How can I get the selected month from a kendoCalendar??

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 + '/');
}

P.S I attached a view of my calendar window. the get value from month selection is undefined.

Thank you.

Hi,

I am new to the Kendo U, and I am trying to build the app using UI calendar with Angular JS. Please help me with the solution.

Is it possible to disable the weekends of the particular month. For example, I am using april month. In here I need to disable the weekends and some days also, like 15 and 16 dates. Please provide the solution on how to achieve it. sample given below.

Your solution will help me with the product.

http://dojo.telerik.com/oMoDU/4 

Regards,

Dhinesh R

 Hi, 

 The first week of January is looking to be 2, not 1. What can  be the explanation? 

Regards, 

   Cristina

Hi, we're using the Bootstrap theme throughout our site and I've noticed that the KendoCalendar doesn't seem to have consistent bootstrap styling?

(See attached image)

I would expect it to have Border Radius applied and also some drop shadow?

Am I missing something or is this the case for everyone?