8.8 ハロオタ誕生日カレンダー...Vue
■
■
デモ画面
これすごくねw?
// ライブラリ関連の読み込みなど
const dayGridPlugin = window.FullCalendarDayGrid.default;
const FullCalendarInteraction = window.FullCalendarInteraction.default;
const VModal = window["vue-js-modal"].default
Vue.use(VModal);
// FullCalendar
Vue.component('calender', {
template: '#calender',
data: function() {
return {
name: "",
imgUrl: "",
id: "",
calendarPlugins: [
dayGridPlugin,
FullCalendarInteraction
],
events: [],
// mouseOvernによるモーダルの呼び出し
eventMouseEnter: function(event, jsEvent, view) {
var title = event.event.title;
app.name = title.substring(0,title.indexOf(" "))
app.imgUrl = event.event.url
app.id = event.event.id
app.show()
},
header:{
left: 'title',
center: 'addPostButton',
right: 'today prev,next'
},
buttonText: {
today: '今日'
},
}
},
mounted: function(){
this.getData();
},
// spreadSheetからデータを取得
methods: {
getData: async function (event) {
let response;
try {
response = await axios.get(
'https://script.google.com/macros/s/AKfycbwzkyHjVYKu53Hh-zS5PBGebOsT5b0kLNtnJWJ7X7s1bxcV3Me-/exec'
);
var this_year = moment().get('year');
for (var i = 0; i < response.data.length; i++) {
for (var j = 0; j < 5; j++) {
var name = response.data[i].name;
// 生まれ年を現在年に置換する
var now = moment(response.data[i].date).set('year', this_year);
// 5年後まで表示
var target_date = moment(now, 'YYYY-MM-DD').add(j, 'year');
var current_date = moment().add(j, 'years');
var birth_date = moment(response.data[i].date);
var age = this.calcAge(current_date, birth_date);
var color = response.data[i].member_color;
var url = response.data[i].image;
var id = response.data[i].id;
this.events.push({title: `${name} ${age}歳`, date: target_date.format('YYYY-MM-DD'), color: `${color}`, url: url, id: id });
}
}
} catch (error) {
console.error(error);
}
},
// 年齢の計算
calcAge: function(today, dateOfBirth) {
let baseAge = today.year() - dateOfBirth.year();
let birthday = moment(
new Date(
today.year() + "-" + (dateOfBirth.month() + 1) + "-" + dateOfBirth.date()
)
);
return baseAge;
}
}
});
let app = new Vue({
el: '#app',
data: function () {
return {
name: "",
imgUrl: "",
id: ""
}
},
methods: {
show : function() {
this.$modal.show('my_modal');
},
hide : function () {
this.$modal.hide('my_modal');
},
}
});