vue.js timeschedule

vue.jsでスケジュール管理アプリを作っています。縦軸で時刻を表し、予定ごとにその予定時刻似合わせた位置に表示するようなtimescheduleを作ろうと思い、exampleをいろいろ探してみたのですが、https://github.com/jayZOU/vue-schedule#commonjsのものしか見つけられませんでした。しかし、このコンポーネントは最終更新日が古く、とりあえず動かしてみたのですがCouldn't find preset "env" relative to directory というエラーが出て動きません。対処法を調べてみたのですがわかりませんでした。よろしければ教えていただけると幸いです。

node_modules/vue-schedule/src/components/Schedule.vue

html
1<div class="schedule">
2    	<div class="time-ground">
3    		<ul>
4    			<li v-for="time in pageTimeGround">
5    				<span>{{time}}</span>
6    				<p :style="timeListSty"></p>
7    			</li>
8    		</ul>
9    	</div>
10    	<div class="task-ground">
11    		<ul>
12    			<li v-for="(week, index) in weekGround" class="task-list">
13    				<p>{{week}}</p>
14    				<ul :style="taskListSty">
15    					<li class="task-list-item" v-for="detail in taskDetail[index]" :style="detail.styleObj" @click="showDetail(detail, week)">
16    						<p>{{detail.dateStart}} - {{detail.dateEnd}}</p>
17    						<h3>{{detail.title}}</h3>
18    					</li>
19    				</ul>
20    			</li>
21    		</ul>
22    	</div>
23
24    	<modal :show="showModal" :show-modal-detail="showModalDetail"> </modal>
25    </div>

css
1.schedule{
2		width: 80%;
3		max-width: 1400px;
4		margin: 0 auto;
5		position: relative;
6	}
7	.time-ground{
8		display: block;
9		position: absolute;
10		left: 0;
11		top: 0;
12		width: 100%;
13	}
14	.time-ground ul li{
15		margin-top: 50px;
16		font-size: 1rem;
17		height: 50px;
18	}
19	.time-ground ul li span{
20		position: absolute;
21		left: -60px;
22		transform: translateY(-50%);
23	}
24	.time-ground ul li p{
25		position:absolute;
26		left: 0;
27
28		height: 1px;
29		background-color: #EAEAEA;
30	}
31	.task-ground{
32		width: 100%;
33	}
34	.task-list{
35		float: left;
36		width: 20%;
37		box-sizing:border-box;
38		border:1px solid #EAEAEA;
39	}
40	.task-list p{
41		text-align: center;
42		font-size: 1rem;
43		padding: 1rem;
44	}
45	.task-list-item{
46		position: absolute;
47		background-color: #577F92;
48		width: 20%;
49		height: 50px;
50		cursor: pointer;
51	}
52	.task-list-item p{
53		text-align: left;
54		padding: 0;
55		margin: 1rem 0 0 1rem;
56		font-size: 0.8rem;
57		color: #EDF2F6;
58	}
59	.task-list-item h3{
60		color: #E0E7E9;
61		margin: 1rem 0 0 1rem;
62	}

js
1import Modal from './Modal.vue';
2export default {
3	name: 'Schedule',
4	props: {
5		timeGround: {
6			type: Array,
7			default: []
8		},
9		weekGround: {
10			type: Array,
11			default: [
12				'Monday',
13				'Tuesday',
14				'Wednesday',
15				'Thursday',
16				'Friday'
17			]
18		},
19		taskDetail: {
20			type: Array,
21			default: []
22		},
23		color: {
24			type: Array,
25			default(){
26				return [
27					"#2B2E4A",
28					"#521262",
29					"#903749",
30					"#53354A",
31					"#40514E",
32					"#537780",
33				]
34			}
35		}
36	},
37	components: {
38		Modal: Modal
39	},
40	// watch: {
41	// 	timeGround: function(value){
42	// 		this.timeGround = value
43	// 	}
44	// },
45	watch: {
46		timeGround(value) {
47
48				// console.log('value=', value);
49				this.pageTimeGround = this.initTimeGroud(value);
50				// return value;
51		}
52	},
53	data() {
54		return {
55			pageTimeGround: [],
56			showModal: false,
57			showModalDetail: {
58				dateStart: '09:30',
59				dateEnd: '10:30',
60				title: 'Metting',
61				week: 'Monday',
62				styleObj: {
63					backgroundColor: "#903749"
64				},
65				detail: 'Metting (German: Mettingen) is a commune in the Moselle department in Grand Est in north-eastern France.'
66			},
67			taskListSty: {
68				height: '900px'
69			},
70			timeListSty: {
71				width: '100%'
72			}
73		}
74	},
75	created() {
76		// console.log(this.ta)
77		this.pageTimeGround = this.initTimeGroud(this.timeGround);
78
79		let maxTime = this.pageTimeGround[this.pageTimeGround.length - 1];
80		let minTime = this.pageTimeGround[0];
81		let maxMin = maxTime.split(':')[0] * 60 + maxTime.split(':')[1] * 1;
82		let minMin = minTime.split(':')[0] * 60 + minTime.split(':')[1] * 1;
83		// console.log(maxMin);
84		// console.log(minMin);
85		// console.log(maxTime);
86		for (let i = 0; i < this.taskDetail.length; i++) {
87		    for (let j = 0; j < this.taskDetail[i].length; j++) {
88		    	// console.log(this.taskDetail[i][j]);
89		        let startMin = this.taskDetail[i][j].dateStart.split(':')[0] * 60 + this.taskDetail[i][j].dateStart.split(':')[1] * 1;
90		        let endMin = this.taskDetail[i][j].dateEnd.split(':')[0] * 60 + this.taskDetail[i][j].dateEnd.split(':')[1] * 1;
91		        if(startMin < minMin || endMin > maxMin) {
92		        	this.taskDetail[i].splice(j, 1);
93		        	j--;
94		        	continue
95		        };
96		        // console.log(endMin);
97		        let difMin = endMin - startMin;
98		        // console.log(startMin);
99		        // console.log(endMin);
100		        this.taskDetail[i][j].styleObj = {
101		            height: difMin * 100 / 60 + 'px',
102		            top: ((startMin - (this.pageTimeGround[0].split(":")[0] * 60 + this.pageTimeGround[0].split(":")[1] * 1)) * 100 / 60) + 50 + 'px',
103		            backgroundColor: this.color[~~(Math.random() * this.color.length)]
104		        }
105		        // console.log(this.color[~~(Math.random() * 4)]);
106		        // console.log(this.taskDetail);
107		        // console.log(this.timeGround);
108		    }
109		}
110		console.log(this.taskDetail);
111	},
112	mounted() {
113		this.taskListSty.height = (this.pageTimeGround.length - 1) * 100 + 'px';
114		this.timeListSty.width = this.weekGround.length * 20 + '%';
115
116		// console.log(this.taskDetail);
117		// console.log(this.weekGround);
118	},
119	methods: {
120		showDetail(obj, week){
121			obj.week = week;
122			this.showModalDetail = obj;
123			this.showModal = !this.showModal;
124		},
125		initTimeGroud(value){
126			if(value && value.length == 2){
127					let startTime = value[0].split(":")[0] * 1;
128					let endTime = value[1].split(":")[0] * 1;
129					value = [];
130					for(let i = startTime; i <= endTime; i++){
131						// console.log(1);
132						// value.push()
133						let hour = i < 10 ? "0" + i : "" + i;
134						value.push(hour + ":00");
135					}
136				}else{
137					value = [
138						"09:00",
139						"10:00",
140						"11:00",
141						"12:00",
142						"13:00",
143						"14:00",
144						"15:00",
145						"16:00",
146						"17:00",
147						"18:00",
148					]
149				}
150				return value;
151		}
152	}
153}

↓ここから追記
足りないbabel-presetをinstallしてbuildしたところ、Failed to mount component: template or render function not defined.というエラーが出ました。よければこちらのエラーの原因も教えていただけると幸いです。
timetable.vueというタイムテーブルを表示する単一ファイルコンポーネントをnewsPage.vue（名前は気にしないでください）というページにexportしています。

↓newsPage.vue

<template>
  <v-ons-page>
    <custom-toolbar :title="'News'" :action="toggleMenu"></custom-toolbar>
    <p style="text-align: center">
      Some news here.
    </p>

    <table></table>

  </v-ons-page>
</template>

<script>
  import Vue from 'vue'
  import customToolbar from './toolbar'
  import Table from './timetable.vue'

  export default {
    props: ['toggleMenu'],
    components:{customToolbar , Table}
  }
</script>

↓timetable.vue

<template>
  <div id="app">
    
		<Schedule
			:time-ground="['09:00', '18:00']"
			:week-ground="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']"
			:task-detail="[
				[
					{
						dateStart: '09:30',
						dateEnd: '10:30',
						title: '开会',
					},
					{
						dateStart: '11:30',
						dateEnd: '13:50',
						title: '开会',
					}

				]
			]">

		</Schedule>
	</div>
</template>

<script>
  import Vue from 'vue';
  import Schedule from 'vue-schedule';

  export default{
    name: 'table',

    components:{ Schedule }
  }
</script>

行動規範の内容に同意します

回答2件

このライブラリはnpm installをして使われることだけを想定しているみたいで、devDependenciesが豊富でdependenciesが極端に少ないです。
そのため、あなたの環境にbabel-preset-envが入っていないためにコンパイルできない可能性が強いかなと思います。

https://github.com/jayZOU/vue-schedule/blob/master/package.json

すくなくともこの時点でのエラーの解決法はbabel-preset-envをインストールすることかと思います。

npm install --save babel-preset-env

package.jsonを見る限りさらにエラーが起こりそうな気がしますが、、、

さらにいうとnode_modules以下で作業すると良いことはなさそうなので、Forkして利用するなりした方がいいと思いますが…。

投稿2018/03/02 08:58

sakapun

総合スコア888

syoyu

2018/03/05 12:36

回答ありがとうございます。 npm install --save babel-preset-envをしたところ、同様にbabel-preset-stage-2のエラーも出たためnpm installすると、無事buildには成功しました。しかし、次は別のエラーが出たのですが、それについても質問して良いでしょうか？質問に追記します。 node_modules以下で作業はしていないです。エラー文的にそちらが関係しているかと思い、node_modulesを記載しました。紛らわしくてすみません。

行動規範の内容に同意します

FullCalendarが使いやすいと思うのですが、どうでしょうか。

Vue用のラッパーもあります。

https://github.com/CroudSupport/vue-fullcalendar

投稿2018/03/01 23:30

naga3

総合スコア1293

syoyu

2018/03/07 13:53

回答ありがとうございます。 FullCalendarを導入してみようと思ったのですが、buildしてみるとUncaught SyntaxError: Unexpected identifierというエラーが出てしまいました。該当箇所は単一ファイルコンポーネントのimport {FullCalendar} from 'vue-full-calendar';という部分です。vue-full-calendarはnode_modulesのファイルです。文法的に何かおかしなところがあるのでしょうか。教えていただけると幸いです。

行動規範の内容に同意します

あなたの回答