iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
363 lines (338 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _dateFunc = require('./components/dateFunc');
var _dateFunc2 = _interopRequireDefault(_dateFunc);
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
var _eventCard = require('./components/eventCard');
var _eventCard2 = _interopRequireDefault(_eventCard);
var _header = require('./components/header.js');
var _header2 = _interopRequireDefault(_header);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'IepFullcalendar',
components: {
EventCard: _eventCard2['default'],
FcHeader: _header2['default']
},
props: {
events: {
// events will be displayed on calendar
type: Array,
'default': []
},
locale: {
type: String,
'default': 'en'
},
firstDay: {
type: Number | String,
validator: function validator(val) {
var res = parseInt(val);
return res >= 0 && res <= 6;
},
'default': 0
}
},
data: function data() {
return {
currentMonth: (0, _moment2['default'])().startOf('month'),
isLismit: true,
eventLimit: 3,
showMore: false,
morePos: {
top: 0,
left: 0
},
selectDay: {},
weeks: [1, 2, 3, 4, 5, 6, 7]
};
},
computed: {
currentDates: function currentDates() {
return this.getCalendar();
}
},
mounted: function mounted() {
this.emitChangeMonth(this.currentMonth);
},
methods: {
localeWeekDay: function localeWeekDay(weekday, firstDay, locale) {
firstDay = parseInt(firstDay);
var localMoment = (0, _moment2['default'])().locale(locale);
return localMoment.localeData().weekdaysShort()[(weekday + firstDay) % 7];
},
emitChangeMonth: function emitChangeMonth(firstDayOfMonth) {
this.currentMonth = firstDayOfMonth;
this.showMore = false;
var start = _dateFunc2['default'].getMonthViewStartDate(firstDayOfMonth, this.firstDay);
var end = _dateFunc2['default'].getMonthViewEndDate(firstDayOfMonth, this.firstDay);
this.$emit('changeMonth', start, end, firstDayOfMonth);
},
moreTitle: function moreTitle(date) {
if (!date) return '';
return (0, _moment2['default'])(date).format('ll');
},
getCalendar: function getCalendar() {
// calculate 2d-array of each month
var monthViewStartDate = _dateFunc2['default'].getMonthViewStartDate(this.currentMonth, this.firstDay);
var calendar = [];
for (var perWeek = 0; perWeek < 6; perWeek++) {
var week = [];
for (var perDay = 0; perDay < 7; perDay++) {
week.push({
monthDay: monthViewStartDate.date(),
isToday: monthViewStartDate.isSame((0, _moment2['default'])(), 'day'),
isCurMonth: monthViewStartDate.isSame(this.currentMonth, 'month'),
weekDay: perDay,
date: (0, _moment2['default'])(monthViewStartDate),
events: this.slotEvents(monthViewStartDate)
});
monthViewStartDate.add(1, 'day');
}
calendar.push(week);
}
return calendar;
},
slotEvents: function slotEvents(date) {
// find all events start from this date
var cellIndexArr = [];
var thisDayEvents = this.events.filter(function (day) {
var st = (0, _moment2['default'])(day.start);
var ed = (0, _moment2['default'])(day.end ? day.end : st);
return date.isBetween(st, ed, null, '[]');
});
// sort by duration
thisDayEvents.sort(function (a, b) {
if (!a.cellIndex) return 1;
if (!b.cellIndex) return -1;
return a.cellIndex - b.cellIndex;
});
// mark cellIndex and place holder
for (var i = 0; i < thisDayEvents.length; i++) {
thisDayEvents[i].cellIndex = thisDayEvents[i].cellIndex || i + 1;
thisDayEvents[i].isShow = true;
if (thisDayEvents[i].cellIndex == i + 1 || i > 2) continue;
thisDayEvents.splice(i, 0, {
title: 'holder',
cellIndex: i + 1,
start: date.format(),
end: date.format(),
isShow: false
});
}
return thisDayEvents;
},
selectThisDay: function selectThisDay(day, jsEvent) {
jsEvent.stopPropagation();
this.selectDay = day;
this.showMore = true;
this.morePos = this.computePos(event.target);
this.morePos.top -= 100;
var events = day.events.filter(function (item) {
return item.isShow == true;
});
this.$emit('moreClick', day.date, events, jsEvent);
},
computePos: function computePos(target) {
var eventRect = target.getBoundingClientRect();
var pageRect = this.$refs.dates.getBoundingClientRect();
return {
left: eventRect.left - pageRect.left,
top: eventRect.top + eventRect.height - pageRect.top
};
},
dayClick: function dayClick(day, jsEvent) {
jsEvent.stopPropagation();
this.$emit('dayClick', day, jsEvent);
},
eventClick: function eventClick(event, jsEvent) {
if (!event.isShow) return;
jsEvent.stopPropagation();
var pos = this.computePos(jsEvent.target);
this.$emit('eventClick', event, jsEvent, pos);
}
},
render: function render() {
var _this = this;
var h = arguments[0];
return h(
'div',
{ 'class': 'comp-full-calendar' },
[h(
'fc-header',
{
attrs: {
'current-month': this.currentMonth,
'first-day': this.firstDay,
locale: this.locale
},
on: {
'change': this.emitChangeMonth
}
},
[h(
'div',
{ slot: 'headerCenter' },
[this.$slots.fcHeaderCenter]
), h(
'div',
{ slot: 'headerLeft' },
[this.$slots.fcHeaderLeft]
)]
), h(
'div',
{ 'class': 'full-calendar-body' },
[h(
'div',
{ 'class': 'weeks' },
[this.weeks.map(function (item) {
return h(
'strong',
{ 'class': 'week' },
[_this.localeWeekDay(item - 1, _this.firstDay, _this.locale)]
);
})]
), h(
'div',
{ ref: 'dates', 'class': 'dates' },
[h(
'div',
{ 'class': 'dates-bg' },
[this.currentDates.map(function (week) {
return h(
'div',
{ 'class': 'week-row' },
[week.map(function (day) {
return h(
'div',
{
'class': ['day-cell', day.isToday ? 'today' : '', !day.isCurMonth ? 'not-cur-month' : '']
},
[h(
'p',
{ 'class': 'day-number' },
[h('span', [' ', day.monthDay])]
)]
);
})]
);
})]
), h(
'div',
{ 'class': 'dates-events' },
[this.currentDates.map(function (week) {
return h(
'div',
{ 'class': 'events-week' },
[week.map(function (day) {
return h(
'div',
{
attrs: {
'track-by': '$index'
},
'class': ['events-day', day.isToday ? 'today' : '', !day.isCurMonth ? 'not-cur-month' : ''],
on: {
'click': function click($event) {
return _this.dayClick(day.date, $event);
}
}
},
[h(
'p',
{ 'class': 'day-number' },
[h('span', [' ', day.monthDay])]
), h(
'div',
{ 'class': 'event-box' },
[day.events.map(function (event) {
return event.cellIndex <= _this.eventLimit ? h(
'event-card',
{
attrs: {
event: event,
date: day.date,
firstDay: _this.firstDay
},
on: {
'click': _this.eventClick
}
},
[_this.$scopedSlots.fcEventCard ? h(
'div',
{ slot: 'p' },
[_this.$scopedSlots.fcEventCard(event)]
) : '']
) : '';
}), day.events.length > _this.eventLimit ? h(
'p',
{
'class': 'more-link',
on: {
'click': function click($event) {
return _this.selectThisDay(day, $event);
}
}
},
['+ ', day.events.length - _this.eventLimit, ' more']
) : '']
)]
);
})]
);
})]
), this.showMore ? h(
'div',
{
'class': 'more-events',
style: { left: this.morePos.left + 'px', top: this.morePos.top + 'px' }
},
[h(
'div',
{ 'class': 'more-header' },
[h(
'span',
{ 'class': 'title' },
[this.moreTitle(this.selectDay.date)]
), h(
'span',
{
'class': 'close',
on: {
'click': function click($event) {
$event.stopPropagation();
_this.showMore = false;
}
}
},
['x']
)]
), h(
'div',
{ 'class': 'more-body' },
[h(
'ul',
{ 'class': 'body-list' },
[this.selectDay.events.map(function (event) {
return event.isShow ? h(
'li',
{ 'class': 'body-item', on: {
'click': function click($event) {
return _this.eventClick(event, $event);
}
}
},
[event.title]
) : '';
})]
)]
)]
) : '']
)]
)]
);
}
};