我正在使用clndr.js来使我的HTML工作。所以我一直在寻找＆＃34;全日历＆＃34;模板，您可以在github website of clndr.js
上看到我有一个日历的HTML代码。 clndr.js是我想要使用的jquery代码。我有3个问题：
1）HTML代码现在是日历的顶部，包含月份和年份以及上一个和下一个按钮。月份和年份位于中心，按钮应位于其右侧和左侧。但他们不是！
<div>
<div class="clndr-previous-button"><</div>
<div class="current-month"><h3><%= month %> <%= year %></h3></div>
<div class="clndr-next-button">></div>
</div>
第一期的图片： previous-next-button
2）第二个问题是在日历之外的网站底部列出日期事件。原始代码是：
<div class="one-half-responsive last-column">
<div class="calendar-hours">
<a href="#" class="calendar-hour calendar-hour-taken">
<strong class="cal-from">Freitag</strong>
<strong class="cal-to">06.01.25</strong>
<h4>Restmüll</h4>
<em><i class="fa fa-map-marker"></i>Ober-Mörlen</em>
</a>
</div>
</div>
我的clndr.js新模板是：
<div class="one-half-responsive last-column">
<div class="calendar-hours">
<a href="#" class="calendar-hour calendar-hour-taken">
<% _.each(eventsThisMonth, function(event) { %>
<strong class="cal-from"><%= event.date %></strong>
<strong class="cal-to"><%= event.date %></strong>
<h4><%= event.title%></h4>
<em><i class="fa fa-map-marker"></i><%= event.location %></em>
</a>
<% }); %>
</div>
</div>
在原始代码中，我可以复制并粘贴代码，以便在它们之间列出事件。但在新模板中，它不起作用。第一个条目是正确的，但其余条目不正确，请在第二个图像上看到它： Listing of events not working
3）最后一个问题是在日历中显示5个不同的css类，标记为圆形彩色按钮（第6天为红色，第10天为蓝色，第12天为黄色，第18天为棕色，第20天为红色） 。这些类应该是事件，我希望它们之间有一个列表（参见问题2）。
最后一张图片显示日历中的按钮： colored-round-buttons-in-calendar
我的两个js代码文件是。
此第二个js代码未完成。查看github页面了解更多详情：
var clndr = {};
$( function() {
// PARDON ME while I do a little magic to keep these events relevant for the rest of time...
var currentMonth = moment().format('YYYY-MM');
var nextMonth = moment().add('month', 1).format('YYYY-MM');
var events = [
{ date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats', },
{ date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
{ date: currentMonth + '-' + '24', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
];
clndr = $('#full-clndr').clndr({
template: $('#full-clndr-template').html(),
events: events,
forceSixRows: true
});
并且：
/**
* ~ CLNDR v1.4.7 ~
* ==============================================
* https://github.com/kylestetz/CLNDR
* ==============================================
* Created by kyle stetz (github.com/kylestetz)
* & available under the MIT license
* http://opensource.org/licenses/mit-license.php
* ==============================================
*
* This is the fully-commented development version of CLNDR.
* For the production version, check out clndr.min.js
* at https://github.com/kylestetz/CLNDR
*
* This work is based on the
* jQuery lightweight plugin boilerplate
* Original author: @ajpiano
* Further changes, comments: @addyosmani
* Licensed under the MIT license
*/
(function (factory) {
// Multiple loading methods are supported depending on
// what is available globally. While moment is loaded
// here, the instance can be passed in at config time.
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'moment'], factory);
}
else if (typeof exports === 'object') {
// Node/CommonJS
factory(require('jquery'), require('moment'));
}
else {
// Browser globals
factory(jQuery, moment);
}
}(function ($, moment) {
// Namespace
var pluginName = 'clndr';
// This is the default calendar template. This can be overridden.
var clndrTemplate =
"<div class='clndr-controls'>" +
"<div class='clndr-control-button'>" +
"<span class='clndr-previous-button'>previous</span>" +
"</div>" +
"<div class='current-month'><h3><%= month %> <%= year %></h3></div>" +
"<div class='clndr-control-button rightalign'>" +
"<span class='clndr-next-button'>next</span>" +
"</div>" +
"</div>" +
"<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>" +
"<thead>" +
"<tr class='header-days'>" +
"<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>" +
"<td class='header-day'><%= daysOfTheWeek[i] %></td>" +
"<% } %>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"<% for(var i = 0; i < numberOfRows; i++){ %>" +
"<tr>" +
"<% for(var j = 0; j < 7; j++){ %>" +
"<% var d = j + i * 7; %>" +
"<td class='<%= days[d].classes %>'>" +
"<div class='day-contents'><%= days[d].day %></div>" +
"</td>" +
"<% } %>" +
"</tr>" +
"<% } %>" +
"</tbody>" +
"</table>";
// Defaults used throughout the application, see docs.
var defaults = {
events: [{
date: "2018-04-06",
class: "restmuell",
}],
ready: null,
extras: null,
render: null,
moment: null,
weekOffset: 1,
constraints: null,
forceSixRows: null,
selectedDate: null,
doneRendering: null,
daysOfTheWeek: ['SO', 'MO', 'DI', 'MI', 'DO', 'FR', 'SA'],
multiDayEvents: null,
startWithMonth: null,
dateParameter: 'date',
template: clndrTemplate,
showAdjacentMonths: false,
trackSelectedDate: false,
adjacentDaysChangeMonth: false,
ignoreInactiveDaysInSelection: null,
lengthOfTime: {
days: null,
interval: 1,
months: null
},
clickEvents: {
click: null,
today: null,
nextYear: null,
nextMonth: null,
nextInterval: null,
previousYear: null,
onYearChange: null,
previousMonth: null,
onMonthChange: null,
previousInterval: null,
onIntervalChange: null
},
targets: {
day: 'day',
empty: 'empty',
nextButton: 'clndr-next-button',
todayButton: 'clndr-today-button',
previousButton: 'clndr-previous-button',
nextYearButton: 'clndr-next-year-button',
previousYearButton: 'clndr-previous-year-button'
},
classes: {
past: "past",
today: "today",
event: "event",
inactive: "clear-day",
selected: "restmuell",
lastMonth: "last-month",
nextMonth: "next-month",
adjacentMonth: "adjacent-month"
},
};
/**
* The actual plugin constructor.
* Parses the events and lengthOfTime options to build a calendar of day
* objects containing event information from the events array.
*/
function Clndr(element, options) {
var dayDiff;
var constraintEnd;
var constraintStart;
this.element = element;
// Merge the default options with user-provided options
this.options = $.extend(true, {}, defaults, options);
// Check if moment was passed in as a dependency
if (this.options.moment) {
moment = this.options.moment;
}
// Boolean values used to log if any contraints are met
this.constraints = {
next: true,
today: true,
previous: true,
nextYear: true,
previousYear: true
};
// If there are events, we should run them through our
// addMomentObjectToEvents function which will add a date object that
// we can use to make life easier. This is only necessarywhen events
// are provided on instantiation, since our setEvents function uses
// addMomentObjectToEvents.
if (this.options.events.length) {
if (this.options.multiDayEvents) {
this.options.events =
this.addMultiDayMomentObjectsToEvents(this.options.events);
} else {
this.options.events =
this.addMomentObjectToEvents(this.options.events);
}
}
// This used to be a place where we'd figure out the current month,
// but since we want to open up support for arbitrary lengths of time
// we're going to store the current range in addition to the current
// month.
if (this.options.lengthOfTime.months || this.options.lengthOfTime.days) {
// We want to establish intervalStart and intervalEnd, which will
// keep track of our boundaries. Let's look at the possibilities...
if (this.options.lengthOfTime.months) {
// Gonna go right ahead and annihilate any chance for bugs here
this.options.lengthOfTime.days = null;
// The length is specified in months. Is there a start date?
if (this.options.lengthOfTime.startDate) {
this.intervalStart =
moment(this.options.lengthOfTime.startDate)
.startOf('month');
} else if (this.options.startWithMonth) {
this.intervalStart =
moment(this.options.startWithMonth)
.startOf('month');
} else {
this.intervalStart = moment().startOf('month');
}
// Subtract a day so that we are at the end of the interval. We
// always want intervalEnd to be inclusive.
this.intervalEnd = moment(this.intervalStart)
.add(this.options.lengthOfTime.months, 'months')
.subtract(1, 'days');
this.month = this.intervalStart.clone();
}
else if (this.options.lengthOfTime.days) {
// The length is specified in days. Start date?
if (this.options.lengthOfTime.startDate) {
this.intervalStart =
moment(this.options.lengthOfTime.startDate)
.startOf('day');
} else {
this.intervalStart = moment().weekday(0).startOf('day');
}
this.intervalEnd = moment(this.intervalStart)
.add(this.options.lengthOfTime.days - 1, 'days')
.endOf('day');
this.month = this.intervalStart.clone();
}
// No length of time specified so we're going to default into using the
// current month as the time period.
} else {
this.month = moment().startOf('month');
this.intervalStart = moment(this.month);
this.intervalEnd = moment(this.month).endOf('month');
}
if (this.options.startWithMonth) {
this.month = moment(this.options.startWithMonth).startOf('month');
this.intervalStart = moment(this.month);
this.intervalEnd = (this.options.lengthOfTime.days)
? moment(this.month)
.add(this.options.lengthOfTime.days - 1, 'days')
.endOf('day')
: moment(this.month).endOf('month');
}
}));
我希望有人可以提供帮助！