This is a migrated thread and some comments may be shown as answers.

KendoCalendar get month value

1 Answer 63 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Emanuel
Top achievements
Rank 1
Emanuel asked on 25 May 2017, 11:50 AM

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.

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 26 May 2017, 11:10 AM
Hi Emanuel,

As you submitted this issue in another forum post and I already answered there, please refer to it:

http://www.telerik.com/forums/kendocalendar-get-month-value

Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Calendar
Asked by
Emanuel
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or