Skip to content

Commit d88f23c

Browse files
shawwwnshawwwn
committed
Add date-specific render.
* add gitignore * is a npm project
1 parent 8536904 commit d88f23c

File tree

7 files changed

+142
-44
lines changed

7 files changed

+142
-44
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package-lock.json
2+
node_modules/

‎demo.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
input, label {
2+
vertical-align: middle;
3+
}
4+
5+
p {
6+
margin: 0;
7+
}
8+
9+
input[type="button"] {
10+
padding: 10px;
11+
margin: 3px;
12+
}
13+
14+
#control {
15+
padding: 10px 5%;
16+
}
17+
18+
#container {
19+
margin: auto; width: 90%; height: 80%;
20+
}
21+
22+
#p1 > span {
23+
font-weight: bold;
24+
}

‎demo.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*!
2+
* demo.js
3+
* Shawwwn (shawwwn1@gmail.com)
4+
*/
5+
6+
document.addEventListener('DOMContentLoaded', function(event){
7+
// time
8+
document.querySelector('#p1 > span')
9+
.innerText = app.date;
10+
11+
// button click
12+
document.getElementById('btn1')
13+
.addEventListener('click', function(evt) {
14+
var spans = app.genTimeSpan(app.time_slot_mat);
15+
var txt = spans.join("\n");
16+
alert(txt);
17+
});
18+
document.getElementById('btn2')
19+
.addEventListener('click', function(evt) {
20+
var spans = app.genTimeSpan(app.time_slot_mat);
21+
console.log(spans);
22+
});
23+
document.getElementById('btn3')
24+
.addEventListener('click', function(evt) {
25+
app.navigateToDate();
26+
});
27+
28+
// checkbox
29+
document.getElementById('cb1')
30+
.addEventListener('change', function(evt) {
31+
var cb = evt.target;
32+
app.display_half_hour_labels = cb.checked;
33+
});
34+
});

‎index.html‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,64 @@
22
<html lang="en">
33
<head>
44
<meta charset='utf-8'>
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta n:00ame="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>VueJS Calender</title>
88

99
<link href='main.css' rel='stylesheet'>
10+
<link href='demo.css' rel='stylesheet'>
11+
<!-- <script src="https://momentjs.com/downloads/moment.js"></script> -->
12+
<script src="node_modules/moment/moment.js"></script>
1013
</head>
1114

1215
<body>
13-
<div id='control' style="padding: 10px 5%;">
14-
<input style="vertical-align: middle;" id="cb1" type="checkbox">
15-
<label style="vertical-align: middle;" for="cb1">show half hour label</label>
16+
<div id='control'>
17+
<p id="p1">date is <span></span></p>
18+
<input id="cb1" type="checkbox">
19+
<label for="cb1">show half hour label</label>
1620
<br>
1721
<input type="button" id="btn1" value="generate datetime span">
22+
<input type="button" id="btn2" value="save datetime span">
23+
<input type="button" id="btn3" value="nav to today">
1824
</div>
1925

20-
<div id="container" style="margin: auto; width: 90%; height: 80%;">
21-
<div id="calender">
22-
<!-- <table @mouseleave='dragEnd'> -->
23-
<table>
24-
<tr class='ds-row-header'>
25-
<th class='placeholder'></th>
26-
<th
27-
scope='col'
28-
v-for="(day, i) in day_labels"
29-
:key="day"
30-
:col-index="i">{{ day }}</th>
31-
</tr>
26+
<div id="container">
27+
<div id="calender">
28+
<!-- <table @mouseleave='dragEnd'> -->
29+
<table>
30+
<tr class='ds-row-header'>
31+
<th class='placeholder'></th>
32+
<th
33+
scope='col'
34+
v-for="(label, i) in day_labels"
35+
:class="{ 'ds-today': cur_week && today.isSame(cur_week[i], 'day') }"
36+
:key="label"
37+
:col-index="i">
38+
<span v-if="cur_week">{{ label + " " + cur_week[i].format('M/D') }}</span>
39+
<span v-else>{{ label }}</span>
40+
</th>
41+
</tr>
3242

33-
<tr
34-
v-for="(time, i) in time_labels"
35-
:class="{ 'ds-minor': (time.indexOf(':') != -1) }"
36-
:key="i"
37-
:row-index="i">
38-
<td scope='row'>{{ (time.indexOf(':') == -1) ? time : "" }}</td>
39-
<td
40-
class="ds-slot"
41-
v-for="(slots, j) in time_slot_mat"
42-
:key="j"
43-
:class="{ 'ds-avail':(overlay_mat[j][i]!=null) ? overlay_mat[j][i] : time_slot_mat[j][i] }"></td>
44-
</tr>
45-
</table>
46-
</div>
43+
<tr
44+
v-for="(time, i) in time_labels"
45+
:class="{ 'ds-minor': (time.indexOf(':') != -1) }"
46+
:key="i"
47+
:row-index="i">
48+
<td scope='row'>{{ (time.indexOf(':30')==-1 || display_half_hour_labels) ? time : "" }}</td>
49+
<td
50+
class="ds-slot"
51+
v-for="(slots, j) in time_slot_mat"
52+
:key="j"
53+
:class="{ 'ds-avail':(overlay_mat[j][i]!=null) ? overlay_mat[j][i] : time_slot_mat[j][i] }"></td>
54+
</tr>
55+
</table>
56+
</div>
4757
</div>
4858
</body>
4959

50-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
60+
<!-- <script src="https://vuejs.org/js/vue.js"></script> -->
61+
<script src="node_modules/vue/dist/vue.js"></script>
5162
<script src="main.js"></script>
52-
<script type="text/javascript">
53-
document.addEventListener('DOMContentLoaded', function(event){
54-
// button click
55-
document.getElementById('btn1')
56-
.addEventListener('click', function(evt) {
57-
var spans = app.genTimeSpan(app.time_slot_mat);
58-
var txt = spans.join("\n");
59-
console.log(spans)
60-
alert(txt);
61-
});
62-
});
63-
</script>
63+
<script src="demo.js"></script>
6464
</html>
6565

‎main.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ table {
2121
border-color: #ddd;
2222
border-width: 1px;
2323
table-layout: fixed;
24+
box-sizing: border-box;
2425
}
2526

2627
th {
@@ -29,6 +30,8 @@ th {
2930
padding: 0;
3031
margin: 0;
3132
border: 1px solid #ddd;
33+
box-sizing: border-box;
34+
padding: 5px;
3235
}
3336

3437
td {
@@ -39,6 +42,7 @@ td {
3942
border-color: inherit;
4043
border-width: 1px;
4144
border-style: none solid;
45+
box-sizing: border-box;
4246
}
4347

4448
tr [scope="row"], .placeholder {
@@ -52,6 +56,7 @@ tr {
5256
border-style: none solid none solid;
5357
border-color: inherit;
5458
border-width: 1px;
59+
box-sizing: border-box;
5560
}
5661

5762
tr.ds-minor {
@@ -66,3 +71,7 @@ tr.ds-minor {
6671
.ds-avail {
6772
background-color: green;
6873
}
74+
75+
.ds-today {
76+
background-color: #fffacd87;
77+
}

‎main.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,21 +103,35 @@ var app = new Vue({
103103
set_avail: false, // current selection is to set slot available or not
104104
from_slot: null, // drag from slot
105105
to_slot: null, // drag to slot
106-
day_labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
106+
day_labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
107+
cur_week: null,
107108
time_labels: [
108109
"12am", "1am", "2am", "3am", "4am", "5am",
109110
"6am", "7am", "8am", "9am", "10am", "11am",
110111
"12pm", "1pm", "2pm", "3pm", "4pm", "5pm",
111112
"6pm", "7pm", "8pm", "9pm", "10pm", "11pm"
112113
],
113114
half_hour_labels: true, // display half hour
115+
display_half_hour_labels: false,
114116
x_dim: null, // x dimension of the grid
115117
y_dim: null, // y dimension of the grid
116118
time_slot_mat: null, // actual timeslot fulfillment grid
117119
overlay_mat: null, // section box over the grid
120+
today: moment(),
118121
},
119122

120123
methods: {
124+
// render current week from input date
125+
navigateToDate(date) {
126+
date = moment(date);
127+
var week = [];
128+
this.day_labels.forEach(function(label, i) {
129+
let wd = moment(label, 'ddd').weekday();
130+
week.push(moment(date).weekday(wd));
131+
});
132+
this.cur_week = week;
133+
},
134+
121135
// start dragging
122136
dragBegin: function(evt) {
123137
evt.stopPropagation();

‎package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "vue_draggable_calendar",
3+
"version": "1.0.1",
4+
"description": "",
5+
"main": "main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "shawwwn <shawwwn1@gmail.com>",
10+
"license": "MIT",
11+
"dependencies": {
12+
"moment": "^2.24.0",
13+
"vue": "^2.6.10"
14+
}
15+
}

0 commit comments

Comments
 (0)