How to Change the background image on particular date in calendar based on event name in Jquery mobile?

问题

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>

回答1:

I have made a little fix which will add custom classes based on event. It required doing some minor changes to jqm calendar library.

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"
  }]

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];

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>&bull;</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;
}

来源：https://stackoverflow.com/questions/18782689/how-to-change-the-background-image-on-particular-date-in-calendar-based-on-event

标签

jquery

jquery-mobile

calendar