如何基于Jquery Mobile中的事件名称更改日历中特定日期的背景图像? [英] How to Change the background image on particular date in calendar based on event name in Jquery mobile?
问题描述
我正在参加使用此日历创建事件日历.每个事件我都有一些常规事件像会议，聚会，提交，workshop.my这样的月份，我的想法是如何根据事件名称更改日期上的背景图像，以及如何添加消息剩余日期不是动态事件. 这是我的代码:
I am attending to create event calendar using this Calendar.I have some regular events on every month like meeting,party,submission,workshop.my thought is how to change the background image on the date based on event name and also how to add the message remaining dates are no event dynamically. Here is My code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="jw-jqm-cal.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="jw-jqm-cal.js"></script>
<script type="text/javascript">
$(document).on('pageinit', "#view-calendar", function(event, ui) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$("#calendar").jqmCalendar({
events: [{
"summary": "Birthday Dinnaer",
"begin": new Date(y, m, d + 10),
"end": new Date(y, m, d + 11)
}, {
"summary": "Meeting With Project Manager at Diamond Hall",
"begin": new Date(y, m, d + 3),
"end": new Date(y, m, d + 4)
},
],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
days: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
startOfWeek: 0
});
$("#calendar").bind('change', function(event, date) {
console.log(date);
//$("#message").empty();
///$("#message").append('<p><strong>There is No event at'+date+'</strong></p>');
});
})
</script>
</head>
<body>
<div data-role="page" id="view-calendar">
<div data-role="header">
<h1>Tradition Calendar</h1>
</div>
<div data-role="content">
<div id="calendar"></div>
<div id="message"></div>
</div>
</div>
</body>
</html>
推荐答案
我已进行了一些修复，将根据事件添加自定义类.它需要对 jqm日历库进行一些小的更改.
I have made a little fix which will add custom classes based on event. It required doing some minor changes to jqm calendar library.
我首先制作了三个自定义背景CSS类.wedding，.meeting和.party.然后在调用.jqmCalender()的代码内添加一个值.
I first made three custom background CSS classes .wedding, .meeting and .party. And then added a value within the code where you call .jqmCalender().
Download working example
$("#calendar").jqmCalendar({
events: [{
"summary": "Birthday Dinnaer",
"begin": new Date(y, m, d + 10),
"end": new Date(y, m, d + 11),
"bg": "wedding" // or meeting or party "matches class name"
}]
在 jqm calendar.js 中，我进行了以下更改
In jqm calendar.js, I made the following changes
// line 11
bg: "bg",
// line 119 - to retrieve the value from .jqmCalendar() function
var bg = event[plugin.settings.bg];
在这里，日期成为样式，但是我必须删除.importance以便不覆盖自定义类.
Here, the date gets the style but I had to remove .importance in order not to override the custom class.
// line 127
$a.append("<span>•</span>").removeClass("importance-" + importance.toString()).addClass(bg);
在此处，当您单击日期时，它会为摘要添加相同的样式.
Here it adds the same style to summary when you click on date.
// line 211
$("<li class=" + bg + ">" + ((timeString != "00:00-00:00") ? timeString : "") + " " + summary + "</li>").appendTo($listview);
这是自定义类.
And here are the custom classes.
.wedding {
background: #fcecfc;
}
.meeting {
background: #f8ffe8;
}
.party {
background: #ff3019;
}
这篇关于如何基于Jquery Mobile中的事件名称更改日历中特定日期的背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
