アプリケーションにjQueryカレンダーを入れたいのですが、日付ピッカーとしては入れません。ページに埋め込むことはできますか?
各日付にカスタムデータを追加したいと思います。これは可能ですか?
質問する
1106 次
2 に答える
2
数週間前に、日付に色を付けてホバーするために作成した例があります。このコードは好きなように変更できます!ライブの例: http: //marc2.nl/workshops.html(このデモでは背景色が表示され、リンクにホバーが追加されます)。背景色を付けたり、ホバーを追加したりする代わりに、画像を追加することができます。
初期化中:
var calDates = {"36":{"datetime":"2013-02-18 11:02:22","name":"name1","color":"e8b1b1","url":"url1"},"37":{"datetime":"2013-01-22 11:03:08","name":"name2","color":"9fd69f","url":"url2"}};
$("#calendar").datepicker({
onChangeMonthYear : updateDates,
onSelect : updateDates
});
updateDates();
日付をループして、適切な色を付けます。
function updateDates()
{
// Timeout is needed otherwise jQuery UI has not yet updates the month
setTimeout(function(){
for( var k in calDates )
{
var obj = calDates[k],
yearMonthDay = obj.datetime.split(" ")[0].split("-"),
time = obj.datetime.split(" ")[1];
$("#calendar [data-month='" + (parseInt(yearMonthDay[1]) - 1) + "'][data-year='" + yearMonthDay[0] + "'] a").each(function(){
if( $(this).text() == yearMonthDay[2])
{
$(this)
.css({
backgroundColor : "#" + obj.color,
cursor: "pointer",
position : "relative"
})
.unbind("click")
.attr("href", obj.url)
.bind("click", function(){
document.location = $(this).attr("href");
})
.bind("mouseenter", function(){
$(this).find(".hover").show();
})
.bind("mouseleave", function(){
$(this).find(".hover").hide();
})
.append("<div class='hover'><strong>" + obj.name + "</strong><br />" + time + "</div>");
}
});
}
}, 10);
}
于 2013-02-22T18:17:02.987 に答える
0
だから、あなたが本当に欲しいのはカレンダーウィジェットですか?Googleで「jqueryカレンダー」を確認できます。これは私が最初に見つけたものです:
http://arshaw.com/fullcalendar/
オプションの非常に大きなリストは次のとおりです。
http://www.tripwiremagazine.com/2012/11/jquery-calendar-date-pickers.html
そして5つの別のリスト:
http://www.devcurry.com/2010/06/5-jquery-calendar-plugins-that-can-be.html
于 2013-02-22T18:11:41.157 に答える