我正在尝试使用“完整日历”修改日历的设计。我要实现的是按原样显示可以放在日历上的可见事件,将隐藏事件(折叠成“ +2更多”的事件)显示为点。到目前为止的样子:
var dayArray = [];
$(function() {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXTMONTH = todayDate.clone().add(1, 'month').format('YYYY-MM');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
timeFormat: 'HH:mm',
slotLabelFormat: 'HH:mm',
views: {
basic: {
// options apply to basicWeek and basicDay views
},
agenda: {
// options apply to agendaWeek and agendaDay views
},
week: {
columnHeaderFormat: 'ddd D',
titleFormat: 'DD MMM YYYY'
},
day: {
// options apply to basicDay and agendaDay views
}
},
events: [
{
title: 'The AI Summit 2016',
start: YM + '-03',
end: YM + '-06',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: 'Spring 2016',
start: YM + '-09',
end: YM + '-14',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: 'Virtual Assistant Summit',
start: YM + '-17',
end: YM + '-20',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: "O'Reilly Summit 2016",
start: YM + '-23',
end: YM + '-26',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'SIGCHI 2016 Conference',
start: YM + '-18',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'Les Inggris 2016 Q4',
start: YM + '-11',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: 'Minds Mastering Mac',
start: YM + '-05',
end: YM + '-07',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: 'AAAI-16',
start: YM + '-18',
end: YM + '-20',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: 'Service Experience',
start: YM + '-26',
end: YM + '-29',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: 'Les Bahasa Perancis',
start: YM + '-26',
backgroundColor: "#B3EFDA",
borderColor: "#00c983"
},
{
title: 'SMS Las Vegas 2016',
start: YM + '-27',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: 'Leadership Training',
start: YM + '-27',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: 'Leadership Training 2',
start: YM + '-28',
end: YM + '-30',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: 'Leadership Camp Winter 2016',
start: YM + '-27',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'English Course',
start: YM + '-27',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'Sharing Session Hadoop',
start: NEXTMONTH + '-02',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
],
eventTextColor: "#333",
/*
eventAfterAllRender: function() {
var events = $('#calendar').fullCalendar('clientEvents');
console.log(events);
//get all dates with events
var startDateWithEvent = [];
var endDateWithEvent = [];
for (var i = 0; i < events.length; i++) {
startDateWithEvent[i] = events[i].start._i;
endDateWithEvent[i] = events[i].end._i;
}
startDateWithEvent = startDateWithEvent.push(endDateWithEvent);
var dateWithEvent = startDateWithEvent.filter(function(item, pos) {
return startDateWithEvent.indexOf(item) == pos;
});
console.log(dateWithEvent);
//get event colors of each date
for (var i = 0; i < dateWithEvent.length; i++) {
for (var j = 0; j < events.length; j++) {
if (dateWithEvent[i] == events[j].start._i) {
var eventObject = {};
eventObject.date = dateWithEvent[i];
eventObject.title = events[j].title;
eventObject.backgroundColor = events[j].backgroundColor;
eventObject.borderColor = events[j].borderColor;
dayArray.push(eventObject);
}
}
}
//get hidden only events
for (var i = 0; i < dayArray.length; i++) {
}
}*/
});
});
#calendar table {
display: table;
border: none !important;
}
.calendar-example {
line-height: 1.3;
}
.calendar-example h2 {
font-size: 22px;
}
.calendar-example a[data-goto] {
color: #444;
}
.fc-title {
font-size: 12px !important;
}
.fc-center h2 {
font-size: 22px;
color: #00c983;
font-weight: 400;
}
#calendar thead {
border: none !important;
}
.fc-day-header {
border: none !important;
font-size: 13px;
}
.fc-head {
line-height: 40px;
border: none !important;
}
.fc-body {
background-color: #f8f8f8;
}
.fc-day {
/*border-left: none !important;
border-right: none !important;*/
}
.fc-head-container {
/*border-right: none !important;
border-left: none !important;*/
}
.fc-day-number {
font-size: 13px;
margin-right: 4px;
margin-top: 4px;
width: 24px;
height: 24px;
border-radius: 3px;
line-height: 24px;
text-align: center;
color: #777;
}
.fc-day-number:hover {
text-decoration: none !important;
color: #777;
}
.fc-today {
background-color: #E6FAF3 !important;
}
.fc-today .fc-day-number {
background-color: #00c983;
font-weight: 700;
color: #fff;
}
.fc-widget-content {
border-right: solid 8px #f8f8f8 !important;
border-left: solid 8px #f8f8f8 !important;
}
.fc-more-cell > div {
text-align: right;
margin-right: 8px;
font-size: 14px;
color: #777;
}
.fc-more-cell > div > a:hover {
text-decoration: none;
color: #333;
}
.fc-content {
padding: 1px 4px;
}
.fc-widget-header {
border: none !important;
}
.fc-time {
font-size: 12px;
font-weight: 700;
}
.fc-time.fc-widget-content {
border: none;
}
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: none !important;
}
.fc-axis.fc-time.fc-widget-content {
transform: translate(-8px, -12px);
}
.fc-popover.fc-more-popover,
.fc-popover.fc-more-popover .fc-widget-header,
.fc-popover.fc-more-popover .fc-widget-content {
background-color: #fff !important;
}
.fc-axis.fc-widget-content {
font-size: 12px;
font-weight: 700;
}
#calendar .dot-event {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
vertical-align: text-bottom;
}
.red {
width: 10px;
height: 10px;
background-color: "#000";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
是否可以获取每个隐藏事件的属性(尤其是轮廓和背景颜色)?因为我想将隐藏事件表示为点,所以就像这样:
我尝试使用var events = $('#calendar').fullCalendar('clientEvents');
检索所有事件,但是看不到任何能区分隐藏事件和可见事件的东西。文档上几乎没有任何内容可以帮助我解决此问题。
如果这不可能,至少请给我一个想法,如何仅在移动/较小的屏幕上将所有事件转换为点。暂时无法更改FullCalendar的.js,因为我想在片段中显示它。另外,每天有什么方法可以收集事件吗?也许我可以去那里。
对于不好的代码,我感到抱歉,因为我不是开发人员,这是我第一次使用此插件。任何帮助表示赞赏,谢谢! :)
答案 0 :(得分:8)
也许,不是获取隐藏的事件,而是可以尝试根据视图类型更改事件的样式。这样,在月度视图中,事件将是点。 您可以使用eventRender回调(https://fullcalendar.io/docs/eventRender)
您还可以过滤当前视图加载的所有客户端事件,并使用$('#calendar').fullCalendar('clientEvents', filter)
(https://fullcalendar.io/docs/clientEvents)来获取其属性
答案 1 :(得分:4)
运行摘要,看看是否正是您想要的?
CSS部分:
/* New CSS */
之后找到它们。我已注释掉#calendar .dot-event
,但是您可以通过.fc-month-view .fc-day .fc-event-dot
设置点的样式。 (即,我在FullCalendar中使用了现有的点样式/ class
)JS部分:
dayArray
,因为它不是必需的。然后,将eventLimit
设置为false
(必须是eventAfterRender
)。我还使用了eventAfterAllRender
和 not eventAfterRender
,并且我添加的唯一JS在$(function() {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXTMONTH = todayDate.clone().add(1, 'month').format('YYYY-MM');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
eventLimit: false, // Always FALSE
navLinks: true,
timeFormat: 'HH:mm',
slotLabelFormat: 'HH:mm',
views: {
basic: {
// options apply to basicWeek and basicDay views
},
agenda: {
// options apply to agendaWeek and agendaDay views
},
week: {
columnHeaderFormat: 'ddd D',
titleFormat: 'DD MMM YYYY'
},
day: {
// options apply to basicDay and agendaDay views
}
},
events: [
{
title: 'The AI Summit 2016',
start: YM + '-03',
end: YM + '-06',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: 'Spring 2016',
start: YM + '-09',
end: YM + '-14',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: 'Virtual Assistant Summit',
start: YM + '-17',
end: YM + '-20',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: "O'Reilly Summit 2016",
start: YM + '-23',
end: YM + '-26',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'SIGCHI 2016 Conference',
start: YM + '-18',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'Les Inggris 2016 Q4',
start: YM + '-11',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: 'Minds Mastering Mac',
start: YM + '-05',
end: YM + '-07',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: 'AAAI-16',
start: YM + '-18',
end: YM + '-20',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: 'Service Experience',
start: YM + '-26',
end: YM + '-29',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: 'Les Bahasa Perancis',
start: YM + '-26',
backgroundColor: "#B3EFDA",
borderColor: "#00c983"
},
{
title: 'SMS Las Vegas 2016',
start: YM + '-27',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: 'Leadership Training',
start: YM + '-27',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: 'Leadership Training 2',
start: YM + '-28',
end: YM + '-30',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: 'Leadership Camp Winter 2016',
start: YM + '-27',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'English Course',
start: YM + '-27',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: 'Sharing Session Hadoop',
start: NEXTMONTH + '-02',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
],
eventTextColor: "#333",
eventAfterRender: function( event, element, view ){
// Enable for the 'month' view only.
if ( 'month' !== view.name ) {
return;
}
var a = moment( event.start, 'YYYY-MM-DD' ),
b = moment( event.end, 'YYYY-MM-DD' ),
duration = moment.duration( b.diff( a ) ),
row = element.closest( '.fc-row' ),
d = a.clone(), i, c;
var title = event.title;
if ( b.isValid() ) {
title += ' (' + $.fullCalendar.formatRange( a, b, 'MMM D YYYY' ) + ')';
}
// Add the event's "dot", styled with the appropriate background color.
for ( i = 0; i <= duration._data.days; i++ ) {
if ( 0 === 1 ) {
c = a;
} else {
d.add( 1, 'days' );
c = d;
}
row.find( '.fc-day[data-date="' + c.format( 'YYYY-MM-DD' ) + '"]' )
.append(
'<a href="#" class="fc-event-dot" onclick="return false;" ' +
'style="background-color: ' + event.backgroundColor + ';" ' +
'title="' + title + '"></a>'
);
}
// Here you can either completely remove the default element, or just
// hide it visually on screen.
element.remove();
//element.addClass( 'hidden' );
}
});
});
回调函数中。HTML部分:
基本上没有更改。(通过JavaScript动态更改的除外)
(您也可以将我的代码段与您的代码段进行比较,以查看发生了什么变化。)
#calendar table {
display: table;
border: none !important;
}
.calendar-example {
line-height: 1.3;
}
.calendar-example h2 {
font-size: 22px;
}
.calendar-example a[data-goto] {
color: #444;
}
.fc-title {
font-size: 12px !important;
}
.fc-center h2 {
font-size: 22px;
color: #00c983;
font-weight: 400;
}
#calendar thead {
border: none !important;
}
.fc-day-header {
border: none !important;
font-size: 13px;
}
.fc-head {
line-height: 40px;
border: none !important;
}
.fc-body {
background-color: #f8f8f8;
}
.fc-day {
/*border-left: none !important;
border-right: none !important;*/
}
.fc-head-container {
/*border-right: none !important;
border-left: none !important;*/
}
.fc-day-number {
font-size: 13px;
margin-right: 4px;
margin-top: 4px;
width: 24px;
height: 24px;
border-radius: 3px;
line-height: 24px;
text-align: center;
color: #777;
}
.fc-day-number:hover {
text-decoration: none !important;
color: #777;
}
.fc-today {
background-color: #E6FAF3 !important;
}
.fc-today .fc-day-number {
background-color: #00c983;
font-weight: 700;
color: #fff;
}
.fc-widget-content {
border-right: solid 8px #f8f8f8 !important;
border-left: solid 8px #f8f8f8 !important;
}
.fc-more-cell > div {
text-align: right;
margin-right: 8px;
font-size: 14px;
color: #777;
}
.fc-more-cell > div > a:hover {
text-decoration: none;
color: #333;
}
.fc-content {
padding: 1px 4px;
}
.fc-widget-header {
border: none !important;
}
.fc-time {
font-size: 12px;
font-weight: 700;
}
.fc-time.fc-widget-content {
border: none;
}
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: none !important;
}
.fc-axis.fc-time.fc-widget-content {
transform: translate(-8px, -12px);
}
.fc-popover.fc-more-popover,
.fc-popover.fc-more-popover .fc-widget-header,
.fc-popover.fc-more-popover .fc-widget-content {
background-color: #fff !important;
}
.fc-axis.fc-widget-content {
font-size: 12px;
font-weight: 700;
}
/*#calendar .dot-event {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
vertical-align: text-bottom;
}*/
.red {
width: 10px;
height: 10px;
background-color: "#000";
}
/* New CSS */
.fc-month-view .fc-row .fc-day {
/* Aligns the event dots at the bottom of the cell. */
vertical-align: bottom;
}
.fc-month-view .fc-day .fc-event-dot {
cursor: default;
/* Gives some spacing between the dots in a cell. */
margin-right: 2px;
}
.fc-month-view .hidden {
display: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<h3>Hover over the dot.</h3>
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
let(:vanity_url) { 'https://vanity.url' }
let(:partner_campaigns) { double('partner_campaigns') }
let(:loaded_partner_campaigns) { double('loaded_partner_campaigns') }
let(:partner_campaign) do
double("Contentful::Model", fields {:promotion_type => "Promotion 1"}
end
before do
allow(Contentful::PartnerCampaign)
.to receive(:find_by)
.with(vanity_url: vanity_url)
.and_return(partner_campaigns)
allow(partner_campaigns)
.to receive(:load)
.and_return(loaded_partner_campaigns)
allow(loaded_partner_campaigns)
.to receive(:first)
.and_return(partner_campaign)
end
答案 2 :(得分:3)
在这种情况下,完整的日历提供了事件渲染功能。所有经过事件渲染的事件都必须根据将点设计等因素进行检查。
eventRender: function(event, element) {
console.log(event);//here each event printed one bu one as render.start
//and end date of event
if(event.end){
///check the start and end date difference
}else {
//No end date for event
}
if(event.backgroundColor == '#BCE4FD'){
} }
答案 3 :(得分:2)
首先要回答的问题是 “完整日历获取隐藏的事件”属性 。因为在这方面,@ Mariana已经回答了。
您的实际要求是使用完整日历将事件显示为点。
此要求的答案是当前Full Calendar未提供将事件显示为彩色点的功能。
但是您可以通过以下替代方案来实现这一目标:
希望这会对您有所帮助。
答案 4 :(得分:2)
这不是一个完整的解决方案,但这可以帮助您快速解决问题,
您可以通过执行以下操作将“更多”链接转换为相应数量的点,以组的形式单击这些点以显示弹出窗口:
设置eventLimitText: ''
可以删除“更多”文本(使从文本中获取事件数更加容易)。然后,获取所有“更多”链接并将其转换为相应数量的点。
JS示例:
$('.fc-more').each((i, elem) => {
let $elem = $(elem);
let num = $elem.text();
num = parseInt(num.substring(1));
$elem.text('');
for (let j = 0; j < num; j++) {
$elem.append('<div class="dot"></div>');
}
});
示例CSS:
.dot {
background-color: blue;
width: 8px;
height: 8px;
margin-right: 2px;
border-radius: 50%;
display: inline-block;
}
要特别注意的是,这不会创建一个可单击的点,该点对应于与其事件颜色匹配的单个事件。寻求该解决方案可能并非易事(您可能必须设置eventLimit: false
并遍历所有clientEvents
才能确定哪一天发生的事件比您想要的多,将额外的事件转换为基于事件对象的颜色和其他属性,创建您自己的弹出窗口以在点击时显示,等等)。