{"id":6052,"date":"2020-08-26T10:51:52","date_gmt":"2020-08-26T01:51:52","guid":{"rendered":"https:\/\/nsme.red\/wp\/?p=6052"},"modified":"2020-10-19T15:27:10","modified_gmt":"2020-10-19T06:27:10","slug":"v-calendar-%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc","status":"publish","type":"post","link":"https:\/\/core.nsme.net\/notes\/vue-js\/%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa\/6052\/","title":{"rendered":"V-Calendar \u30ab\u30ec\u30f3\u30c0\u30fc"},"content":{"rendered":"\n
CDN\n\u516c\u5f0f\u30b5\u30a4\u30c8\u306b,\u66f8\u3044\u3066\u3042\u308b\u3068\u304a\u308a\u3060\u3068\u3001\u52dd\u624b\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30c3\u30d7\u5f8c\u52d5\u304b\u306a\u304f\u306a\u3063\u305f\u3002\n\u3084\u306f\u308a\u3001CDN\u3092\u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a\u7121\u3057\u3067\u3064\u304b\u3046\u306e\u306f\u6016\u3044\uff01\uff01\n\u3000\u52d5\u4f5c\u78ba\u8a8d\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u2193<\/pre>\n\n\n\n
<script src='https:\/\/unpkg.com\/v-calendar@1.0.8\/lib\/v-calendar.umd.min.js'><\/script>\n<\/code><\/pre>\n\n\n\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u6a2a\u306b\u4e26\u3079\u305f\u3044\u6642<\/span>\n:columns=\"2\"<\/strong><\/pre>\n\n\n\n
\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u975e\u8868\u793a\u306b\u3059\u308b<\/span>\nnav-visibility=\"hidden\"<\/strong><\/pre>\n\n\n\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u6a2a\u306b\u4e26\u3079\u305f\u3044\u6642<\/span>\n\u53c2\u8003 \u300cV-Calendar\u300d\u306e\u65e5\u4ed8\u306e\u5165\u529b\u5236\u9650\u3059\u308b\u65b9\u6cd5<\/pre>\n\n\n\n
available-dates=\"{months:[9,10] }\" <\/code><\/pre>\n\n\n\n

\u30ab\u30ec\u30f3\u30c0\u30fc\u6a5f\u80fd\u306e\u6642\u306f<v-calendar><\/code>
datepicker<\/strong>\u306e\u6642\u306f<v-date-picker><\/code><\/p>\n\n\n\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u30d8\u30c3\u30c0\u30fc\u3092\u5909\u66f4<\/pre>\n\n\n\n
<v-date-picker \n\tmode=\"multiple\" \n\tis-required\n\tis-inline\n\tnav-visibility=\"hidden\"\n\t:available-dates=\"{months:[<?php \n\t\techo $call_month;\n\t\t\t?>] }\" \n\tv-model=\"repeat_day\"\n\t\t>\n\t<template slot='header-title' slot-scope='page'>\n      {{page.yearLabel}}\u5e74{{page.monthLabel}}\n    <\/template>\n\t\t<\/v-date-picker><\/code><\/pre>\n\n\n\n
https:\/\/vcalendar.io\/<\/a><\/p>\n\n\n\n
\u300cV-Calendar\u300d\u306e\u4f7f\u3044\u65b9<\/a><\/p>\n\n\n\n
\u30a4\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc\u3068\u3057\u3066\u5229\u7528\u3000\u901a\u5e38\u306e\u30b9\u30b1\u30b8\u30e5\u30fc\u30eb<\/p>\n\n\n\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u8868\u793a\u5e74\u6708\u3092Watch\u3057\u3066\u3001\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3081\u3070\u3044\u3044\u306e\u3060\u304c\u3001\u3046\u307e\u304f\u53d6\u5f97\u3067\u304d\u305a\u3001\u65ad\u5ff5\u3002(T_T)<\/p>\n\n\n\n
    <v-calendar ref=\"calendar\" is-expanded>\n    <template slot='header-title' slot-scope='props'>\n      {{props.yearLabel}}\u5e74{{props.monthLabel}}<!--\u3000{{props.key}}-->\n\t\t\t\n    <\/template>\n    <template slot='day-content' slot-scope='props'>\n      <div class=\"cell-header\">\n        {{props.day.day}}\n      <\/div>\n      <div class=\"cell-content\">\n      <template \n      v-if=\"dateList.some(date => date.ymd === dateToYYYYMMDD(props.day.date))\">\n        <div \n        class=\"cell-content-line\" \n        v-for=\"content in getContentFromKey(dateToYYYYMMDD(props.day.date))\" \n        v-bind:key=\"content\">\n          {{content}}\n        <\/div>\n        <\/template>\n      <\/div>\n    <\/template>\n\n    <\/v-calendar>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2.5.16\/dist\/vue.js\"><\/script>\n<script src='https:\/\/unpkg.com\/v-calendar'><\/script>\n<script>\n\nvar app = new Vue({\n\t el: '#content',\n\t data() {\n    return {\n      dateList: [\n        {ymd: '20200923', contents: ['\u9aea\u3092\u5207\u308b','\u9762\u8ac7','\u9774\u3092\u8cb7\u3046']},\n        {ymd: '20200914', contents: ['\u7d50\u5a5a\u5f0f']},\n        {ymd: '20200901', contents: ['\u59b9\u306e\u8a95\u751f\u65e5']},\n        {ymd: '20200817', contents: ['\u6d77\u306b\u884c\u304f\uff01', '\u91ce\u7403\u306e\u7df4\u7fd2']}\n      ]\n    }\n\t },\n\tmounted() {\n\t\tconst calendar = this.$refs.calendar;\n\t\tconsole.log(calendar.data.pages[0].key);\n},\n\tmethods: {\n     dateToYYYYMMDD: function(date) {\n      let y = date.getFullYear();\n      let m = ('00' + (date.getMonth()+1)).slice(-2);\n      let d = ('00' + date.getDate()).slice(-2);\n      let result = y + '' + m + '' + d;\n      return result;\n    },\n    getContentFromKey: function(key) {\n      const target = this.dateList.find((date) => {\n        return (date.ymd === key);\n      })\n      return target.contents;\n    }\n  }\n\t\n })\t\n\t<\/script><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
CDN \u516c\u5f0f\u30b5\u30a4\u30c8\u306b,\u66f8\u3044\u3066\u3042\u308b\u3068\u304a\u308a\u3060\u3068\u3001\u52dd\u624b\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30c3\u30d7\u5f8c\u52d5\u304b\u306a\u304f\u306a\u3063\u305f\u3002 \u3084\u306f\u308a\u3001CDN\u3092\u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a\u7121\u3057\u3067\u3064\u304b\u3046\u306e\u306f\u6016\u3044\uff01\uff01 \u3000\u52d5\u4f5c\u78ba\u8a8d\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u2193 \u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u6a2a\u306b\u4e26\u3079\u305f\u3044\u6642 :columns=”2″ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[39],"tags":[],"class_list":["post-6052","post","type-post","status-publish","format-standard","hentry","category-39"],"acf":[],"_links":{"self":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/comments?post=6052"}],"version-history":[{"count":6,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6052\/revisions"}],"predecessor-version":[{"id":6082,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/posts\/6052\/revisions\/6082"}],"wp:attachment":[{"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/media?parent=6052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/categories?post=6052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/core.nsme.net\/notes\/wp-json\/wp\/v2\/tags?post=6052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}