I use this package to create a calendar.
I need make like Full example.
But I need to add the date of the lunar calendar.
Like this:
I find some problems between this.
When I was append text in customDayRenderer function.
then tooltip was no show.
Here's my code:
$('#calendar').calendar({
language: 'zh-TW',
customDayRenderer: function (ele, date) {
var y = moment(date).format('YYYY');
var m = moment(date).format('M');
var d = moment(date).format('D');
var lunaData = window.LunarCalendar.solarToLunar(y, m, d);
var displayText = lunaData.lunarDay == 1 ? lunaData.lunarMonthName : lunaData.lunarDayName;
//節日 修改 packages/lunadatepicker/LunarCalendar.js
if (lunaData.lunarFestival) {
displayText = lunaData.lunarFestival
}
if (lunaData.solarFestival) {
displayText = lunaData.solarFestival
}
var _html = '<br /><span>' + displayText + '</span>';
$(ele).append(_html);
var _weekDay = date.getDay();
if (_weekDay == 0 || _weekDay == 6) {
$(ele).parent().addClass('vacationDay')
}
},
customDataSourceRenderer: function (ele, date, events) {
ele.parent().addClass('testtt')
console.log(ele);
},
enableContextMenu: true,
enableRangeSelection: true,
style: 'custom',
contextMenuItems: [
{
text: 'Update',
click: editEvent
},
{
text: 'Delete',
click: deleteEvent
}
],
mouseOnDay: function (e) {
if (e.events.length > 0) {
var content = '';
for (var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
+ '<div class="event-location">' + e.events[i].location + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html: true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function (e) {
if (e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function (e) {
$(e.element).popover('hide');
}
});
function editEvent(event) {
$('#event-modal input[name="event-index"]').val(event ? event.id : '');
$('#event-modal input[name="event-name"]').val(event ? event.name : '');
$('#event-modal input[name="event-location"]').val(event ? event.location : '');
$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
$('#event-modal').modal();
}
function deleteEvent(event) {
var dataSource = $('#calendar').data('calendar').getDataSource();
for (var i in dataSource) {
if (dataSource[i].id == event.id) {
dataSource.splice(i, 1);
break;
}
}
$('#calendar').data('calendar').getCustomDataSourceRenderer(dataSource);
}
function saveEvent() {
var event = {
id: $('#event-modal input[name="event-index"]').val(),
name: $('#event-modal input[name="event-name"]').val(),
location: $('#event-modal input[name="event-location"]').val(),
startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
}
var dataSource = $('#calendar').data('calendar').getDataSource();
if (event.id) {
for (var i in dataSource) {
if (dataSource[i].id == event.id) {
dataSource[i].name = event.name;
dataSource[i].location = event.location;
dataSource[i].startDate = event.startDate;
dataSource[i].endDate = event.endDate;
}
}
}
else {
var newId = 0;
for (var i in dataSource) {
if (dataSource[i].id > newId) {
newId = dataSource[i].id;
}
}
newId++;
event.id = newId;
dataSource.push(event);
}
$('#calendar').data('calendar').setDataSource(dataSource);
$('#event-modal').modal('hide');
}
Finally, the result of my debugging.
In bootstrap-year-calendar.js
_renderBody function
I was append this code
cellContent.data('daynum',currentDate.getDate());
And in _renderDataSource function about in line 330
Originally using $(ele).text()
I replace to $(this).data('daynum')
In _getDate function
I replace too.
It is recommended to modify these places to be so.
This can be added to the custom text.
I use this package to create a calendar. I need make like Full example. But I need to add the date of the lunar calendar. Like this:
I find some problems between this. When I was append text in customDayRenderer function. then tooltip was no show. Here's my code:
Finally, the result of my debugging. In bootstrap-year-calendar.js _renderBody function
cellContent.data('daynum',currentDate.getDate());And in _renderDataSource function about in line 330$(ele).text()I replace to$(this).data('daynum')In _getDate function
I replace too.
It is recommended to modify these places to be so. This can be added to the custom text.
My English is not very good, please forgive me.