可用性日历.net jquery

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

一方面...编辑简单日历（月视图）和按颜色选择的可能性（如果早晨/下午/晚上..

，并在另一边，一个星期观众（不可编辑）显示的未来7天的活动..

是这样的：（M - 颜色晨/ A - 颜色等...）

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

你知道类似这样的东西吗？任何人都可以帮助我吗？

谢谢！和抱歉，如果现在还不清楚使用jQuery UI DataPicker

来源

2013-06-27 sir_ask

内嵌周选择器（需要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>

来源

2013-06-27 13:50:49 Amol

可用性日历.net jquery

回答

相关问题