使用jquery datepicker創建活動預訂日曆

Question

是否可以使用jquery datepciker創建活動預訂日曆？ 見下面

例如日曆照片時，我訂了在一個地方事件一整天，日期將是紅色的，因爲只有一天它會是黃色，只有晚上這將是綠色的在日期單元格中。當我點擊一個日期時，它抓住日期並帶來預訂表格並預訂全天/每天晚上等。給我一些想法。

Answer 1

如果你只是想顯示出對jQuery的日期選擇器的某些特定日期一些顏色...

可以使用beforeShowDay和功能檢查，如果日期是定陣列中...
然後，根據找到的數組，在日期中添加一個類。
您可以決定禁用日期（無法選擇）。

$(document).ready(function(){ 
 
    var red = ["2017-08-02","2017-08-04","2017-08-06"]; 
 
    var yellow = ["2017-08-09"]; 
 
    var green = ["2017-08-10","2017-08-11"]; 
 

 
    $("#calendar").datepicker({ 
 
    defaultDate: '08/07/2017',  // Just for this demo longevity on SO ;) 
 
    
 
    beforeShowDay: function(date){ 
 
     var dateISO = $.datepicker.formatDate('yy-mm-dd', date); 
 
     //console.log(dateISO); 
 

 
     if(red.indexOf(dateISO)>-1){ 
 
     return [true,"red"]  // Enabled, class 
 
     } 
 
     if(yellow.indexOf(dateISO)>-1){ 
 
     return [true,"yellow"] 
 
     } 
 
     if(green.indexOf(dateISO)>-1){ 
 
     return [true,"green"] 
 
     } 
 
     return [true] // If not found, must at least return the enabled boolean. 
 
    } 
 
    }); 
 
});

.red a{ 
 
    background-color: red !important; 
 
    border-radius: 20px; 
 
} 
 
.yellow a{ 
 
    background-color: yellow !important; 
 
    border-radius: 20px; 
 
} 
 
.green a{ 
 
    background-color: green !important; 
 
    border-radius: 20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="calendar"></div>