8.8 ハロオタ誕生日カレンダー...Vue


  1. 【Vue.js】さ迷うハロオタがお誕生日カレンダーを作った
アイドルのAPIを自作する
システム構成


デモ画面

これすごくね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');
    },
  }
});


Next Post Previous Post
No Comment
Add Comment
comment url