可用性日历.net jquery答案

【问题标题】：Availability calendar .net jquery可用性日历.net jquery
【发布时间】：2013-06-27 10:59:03
【问题描述】：

我需要 jquery .NET 中的一周可用性日历..

一方面.. 可以编辑简单的日历（月视图）并按颜色选择（如果它在早上/下午/晚上可用）..

另一方面，一个周查看器（不可编辑），显示接下来 7 天的事件..

类似这样的东西：（M - 早上的颜色 / A - ......的颜色等）

John - [M][A][A][N][][]
Anna - [][][][][][][]

你知道类似的事情吗？谁能帮帮我？

谢谢！如果不清楚，请见谅

【问题讨论】：

标签： c# jquery .net calendar

【解决方案1】：

使用 jQuery UI DataPicker 的内联星期选择器（需要 jQuery UI 1.8+）See Reference

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
 $(function() {
var startDate;
var endDate;

var selectCurrentWeek = function() {
    window.setTimeout(function () {
        $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
}

$('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
        $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

        selectCurrentWeek();
    },
    beforeShowDay: function(date) {
        var cssClass = '';
        if(date >= startDate && date <= endDate)
            cssClass = 'ui-datepicker-current-day';
        return [true, cssClass];
    },
    onChangeMonthYear: function(year, month, inst) {
        selectCurrentWeek();
    }
});

$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
 });
 </script>
 </head>
 <body>
   <div class="week-picker"></div>
   <br /><br />
   <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
 </body>
 </html>

【讨论】：