Created
November 28, 2017 08:35
-
-
Save tjunussov/344d42323fd78bf2cbab70bb19f38f13 to your computer and use it in GitHub Desktop.
SM Calendar // source http://jsbin.com/kumewog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>SM Calendar</title> | |
| <script src="https://unpkg.com/vue@latest/dist/vue.js"></script> | |
| <style id="jsbin-css"> | |
| html,body { | |
| height:300px; | |
| width:756px; | |
| font-family:monospace; | |
| } | |
| /********* reseting ************/ | |
| ul,li { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| box-sizing:border-box; | |
| } | |
| ul > label { | |
| display:list-item; | |
| } | |
| /*********************/ | |
| .scroll { | |
| /*width: 100%; | |
| height: 100%; */ | |
| overflow-x: scroll; | |
| position:relative; | |
| } | |
| .scroll-layer { | |
| position:absolute; | |
| left:0; | |
| right:0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| /*********CALENDAR************/ | |
| sm-calendar { | |
| display:table; | |
| border-spacing:0; | |
| border-collapse:collapse; | |
| /* table-layout:fixed; */ | |
| padding:0; | |
| margin:0; | |
| box-sizing:border-box; | |
| } | |
| sm-calendar .sm-column-group { | |
| display: table-cell; | |
| /* vertical-align:top; maybe? */ | |
| } | |
| /*layer { | |
| position:absolute; | |
| width:100%; | |
| display:table;*/ | |
| /* height: 100%; height bug*/ | |
| /*}*/ | |
| ul.column { | |
| display: table-cell; | |
| /*overflow:hidden; height bug*/ | |
| position:relative; | |
| } | |
| /* timeline ul column cant be table cell because parent already table-cell*/ | |
| .sm-column-group > ul.column { | |
| display: block; | |
| } | |
| .column-resources ul.column { | |
| min-width:200px; | |
| /* overflow:hidden; height bug */ | |
| } | |
| /*****************************/ | |
| sm-calendar { | |
| --reservation-height: 25px; | |
| --duration : 30; /* defaul minimal duration is 30*/ | |
| --start : 1; /* minutes, start 10:00 */ | |
| --precision : 30; /*[30min] 1800 sec in 30min*/ | |
| } | |
| /*****************************/ | |
| sm-calendar { | |
| border:1px solid #ccc; | |
| } | |
| .decors ul > label { | |
| background-color:rgba(0,0,0,0.15); | |
| text-align:center; | |
| } | |
| .column-resources .decors li, | |
| .column-timeline li, | |
| ul > label | |
| { | |
| border-bottom:1px solid rgba(0,0,0,0.15); | |
| height:var(--reservation-height); | |
| } | |
| ul.column, .decors ul.column:not(:last-child) { | |
| border-right:1px solid rgba(0,0,0,0.05); | |
| } | |
| /********* FX *********/ | |
| .decors li:hover { | |
| background:rgba(255,0,0,0.5); | |
| } | |
| event:hover { | |
| background:rgba(0,0,255,0.5); | |
| } | |
| /******************/ | |
| event { | |
| display:inline-block; | |
| box-sizing:border-box; | |
| overflow: hidden; | |
| /*max-width: 200px;*/ | |
| width: 100%; | |
| background:#ccc; | |
| top:calc(var(--reservation-height) * var(--start)/var(--precision)); | |
| min-height:calc(var(--reservation-height) * var(--duration)/var(--precision)); /* actual height, для плавного отрытия */ | |
| max-height:calc(var(--reservation-height) * var(--duration)/var(--precision));/* actual height */ | |
| z-index: 16; | |
| position: absolute; /* why not ? */ | |
| opacity:0.8; | |
| cursor:pointer; | |
| } | |
| /******************/ | |
| event.canceled { | |
| opacity:0.5; | |
| z-index:-2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <sm-calendar style="width:100%;height:100%;"> | |
| <div class="sm-column-group column-timeline" style="width:50px;"> | |
| <ul class="column"> | |
| <label>Time</label> | |
| <li v-for="t in timeRange">{{t+10}}:00</li> | |
| </ul> | |
| </div> | |
| <div class="sm-column-group column-resources scroll"> | |
| <div class="events scroll-layer"> | |
| <ul class="column" v-for="r in resources"> | |
| <!--label></label--> | |
| <event v-for="e in events[r.name]" key="r.name" | |
| :style="{ '--start':e.start, '--duration':e.end-e.start}" | |
| :class="{ 'canceled':e.canceled }" | |
| >{{e.title}} | |
| </event> | |
| </ul> | |
| </div> | |
| <div class="decors scroll-layer"> | |
| <ul class="column" v-for="r in resources"> | |
| <label>{{r.name}}</label> | |
| <li v-for="t in timeRange"></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </sm-calendar> | |
| <script id="jsbin-javascript"> | |
| Vue.config.ignoredElements = ['event']; | |
| new Vue({ | |
| el: 'sm-calendar', | |
| data: { | |
| resources: [ | |
| { | |
| "name": "Room1", | |
| "status": "active" | |
| }, { | |
| "name": "Room2", | |
| "status": "active" | |
| }, { | |
| "name": "Room3", | |
| "status": "active" | |
| }, { | |
| "name": "Room4", | |
| "status": "active" | |
| } | |
| ], | |
| events: { | |
| "Room1": [{ | |
| "start": 60, | |
| "end": 120, | |
| "title": "Тайская изюминка" | |
| }], | |
| "Room2": [{ | |
| "start": 120, | |
| "end": 240, | |
| "title": "Тайская изюминка", | |
| "canceled": true | |
| }] | |
| }, | |
| start: 10, | |
| end: 20, | |
| timeRange: 10 | |
| } | |
| /*methods: { | |
| add: !-> | |
| this.items.push {text: this.todoText} | |
| this.todoText = '' | |
| delete: (ev) !-> | |
| this.items.remove ev.targetVM.$data | |
| deleteAll: !-> | |
| #e = this.items | |
| #pop = e.pop.bind e | |
| #[0 to e.length].forEach pop | |
| this.items = [] | |
| }*/ | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">html,body { | |
| height:300px; | |
| width:756px; | |
| font-family:monospace; | |
| } | |
| /********* reseting ************/ | |
| ul,li { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| box-sizing:border-box; | |
| } | |
| ul > label { | |
| display:list-item; | |
| } | |
| /*********************/ | |
| .scroll { | |
| /*width: 100%; | |
| height: 100%; */ | |
| overflow-x: scroll; | |
| position:relative; | |
| } | |
| .scroll-layer { | |
| position:absolute; | |
| left:0; | |
| right:0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| /*********CALENDAR************/ | |
| sm-calendar { | |
| display:table; | |
| border-spacing:0; | |
| border-collapse:collapse; | |
| /* table-layout:fixed; */ | |
| padding:0; | |
| margin:0; | |
| box-sizing:border-box; | |
| } | |
| sm-calendar .sm-column-group { | |
| display: table-cell; | |
| /* vertical-align:top; maybe? */ | |
| } | |
| /*layer { | |
| position:absolute; | |
| width:100%; | |
| display:table;*/ | |
| /* height: 100%; height bug*/ | |
| /*}*/ | |
| ul.column { | |
| display: table-cell; | |
| /*overflow:hidden; height bug*/ | |
| position:relative; | |
| } | |
| /* timeline ul column cant be table cell because parent already table-cell*/ | |
| .sm-column-group > ul.column { | |
| display: block; | |
| } | |
| .column-resources ul.column { | |
| min-width:200px; | |
| /* overflow:hidden; height bug */ | |
| } | |
| /*****************************/ | |
| sm-calendar { | |
| --reservation-height: 25px; | |
| --duration : 30; /* defaul minimal duration is 30*/ | |
| --start : 1; /* minutes, start 10:00 */ | |
| --precision : 30; /*[30min] 1800 sec in 30min*/ | |
| } | |
| /*****************************/ | |
| sm-calendar { | |
| border:1px solid #ccc; | |
| } | |
| .decors ul > label { | |
| background-color:rgba(0,0,0,0.15); | |
| text-align:center; | |
| } | |
| .column-resources .decors li, | |
| .column-timeline li, | |
| ul > label | |
| { | |
| border-bottom:1px solid rgba(0,0,0,0.15); | |
| height:var(--reservation-height); | |
| } | |
| ul.column, .decors ul.column:not(:last-child) { | |
| border-right:1px solid rgba(0,0,0,0.05); | |
| } | |
| /********* FX *********/ | |
| .decors li:hover { | |
| background:rgba(255,0,0,0.5); | |
| } | |
| event:hover { | |
| background:rgba(0,0,255,0.5); | |
| } | |
| /******************/ | |
| event { | |
| display:inline-block; | |
| box-sizing:border-box; | |
| overflow: hidden; | |
| /*max-width: 200px;*/ | |
| width: 100%; | |
| background:#ccc; | |
| top:calc(var(--reservation-height) * var(--start)/var(--precision)); | |
| min-height:calc(var(--reservation-height) * var(--duration)/var(--precision)); /* actual height, для плавного отрытия */ | |
| max-height:calc(var(--reservation-height) * var(--duration)/var(--precision));/* actual height */ | |
| z-index: 16; | |
| position: absolute; /* why not ? */ | |
| opacity:0.8; | |
| cursor:pointer; | |
| } | |
| /******************/ | |
| event.canceled { | |
| opacity:0.5; | |
| z-index:-2; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">Vue.config.ignoredElements = ['event']; | |
| new Vue({ | |
| el: 'sm-calendar', | |
| data: { | |
| resources: [ | |
| { | |
| "name": "Room1", | |
| "status": "active" | |
| }, { | |
| "name": "Room2", | |
| "status": "active" | |
| }, { | |
| "name": "Room3", | |
| "status": "active" | |
| }, { | |
| "name": "Room4", | |
| "status": "active" | |
| } | |
| ], | |
| events: { | |
| "Room1": [{ | |
| "start": 60, | |
| "end": 120, | |
| "title": "Тайская изюминка" | |
| }], | |
| "Room2": [{ | |
| "start": 120, | |
| "end": 240, | |
| "title": "Тайская изюминка", | |
| "canceled": true | |
| }] | |
| }, | |
| start: 10, | |
| end: 20, | |
| timeRange: 10 | |
| } | |
| /*methods: { | |
| add: !-> | |
| this.items.push {text: this.todoText} | |
| this.todoText = '' | |
| delete: (ev) !-> | |
| this.items.remove ev.targetVM.$data | |
| deleteAll: !-> | |
| #e = this.items | |
| #pop = e.pop.bind e | |
| #[0 to e.length].forEach pop | |
| this.items = [] | |
| }*/ | |
| });</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html,body { | |
| height:300px; | |
| width:756px; | |
| font-family:monospace; | |
| } | |
| /********* reseting ************/ | |
| ul,li { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| box-sizing:border-box; | |
| } | |
| ul > label { | |
| display:list-item; | |
| } | |
| /*********************/ | |
| .scroll { | |
| /*width: 100%; | |
| height: 100%; */ | |
| overflow-x: scroll; | |
| position:relative; | |
| } | |
| .scroll-layer { | |
| position:absolute; | |
| left:0; | |
| right:0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| /*********CALENDAR************/ | |
| sm-calendar { | |
| display:table; | |
| border-spacing:0; | |
| border-collapse:collapse; | |
| /* table-layout:fixed; */ | |
| padding:0; | |
| margin:0; | |
| box-sizing:border-box; | |
| } | |
| sm-calendar .sm-column-group { | |
| display: table-cell; | |
| /* vertical-align:top; maybe? */ | |
| } | |
| /*layer { | |
| position:absolute; | |
| width:100%; | |
| display:table;*/ | |
| /* height: 100%; height bug*/ | |
| /*}*/ | |
| ul.column { | |
| display: table-cell; | |
| /*overflow:hidden; height bug*/ | |
| position:relative; | |
| } | |
| /* timeline ul column cant be table cell because parent already table-cell*/ | |
| .sm-column-group > ul.column { | |
| display: block; | |
| } | |
| .column-resources ul.column { | |
| min-width:200px; | |
| /* overflow:hidden; height bug */ | |
| } | |
| /*****************************/ | |
| sm-calendar { | |
| --reservation-height: 25px; | |
| --duration : 30; /* defaul minimal duration is 30*/ | |
| --start : 1; /* minutes, start 10:00 */ | |
| --precision : 30; /*[30min] 1800 sec in 30min*/ | |
| } | |
| /*****************************/ | |
| sm-calendar { | |
| border:1px solid #ccc; | |
| } | |
| .decors ul > label { | |
| background-color:rgba(0,0,0,0.15); | |
| text-align:center; | |
| } | |
| .column-resources .decors li, | |
| .column-timeline li, | |
| ul > label | |
| { | |
| border-bottom:1px solid rgba(0,0,0,0.15); | |
| height:var(--reservation-height); | |
| } | |
| ul.column, .decors ul.column:not(:last-child) { | |
| border-right:1px solid rgba(0,0,0,0.05); | |
| } | |
| /********* FX *********/ | |
| .decors li:hover { | |
| background:rgba(255,0,0,0.5); | |
| } | |
| event:hover { | |
| background:rgba(0,0,255,0.5); | |
| } | |
| /******************/ | |
| event { | |
| display:inline-block; | |
| box-sizing:border-box; | |
| overflow: hidden; | |
| /*max-width: 200px;*/ | |
| width: 100%; | |
| background:#ccc; | |
| top:calc(var(--reservation-height) * var(--start)/var(--precision)); | |
| min-height:calc(var(--reservation-height) * var(--duration)/var(--precision)); /* actual height, для плавного отрытия */ | |
| max-height:calc(var(--reservation-height) * var(--duration)/var(--precision));/* actual height */ | |
| z-index: 16; | |
| position: absolute; /* why not ? */ | |
| opacity:0.8; | |
| cursor:pointer; | |
| } | |
| /******************/ | |
| event.canceled { | |
| opacity:0.5; | |
| z-index:-2; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Vue.config.ignoredElements = ['event']; | |
| new Vue({ | |
| el: 'sm-calendar', | |
| data: { | |
| resources: [ | |
| { | |
| "name": "Room1", | |
| "status": "active" | |
| }, { | |
| "name": "Room2", | |
| "status": "active" | |
| }, { | |
| "name": "Room3", | |
| "status": "active" | |
| }, { | |
| "name": "Room4", | |
| "status": "active" | |
| } | |
| ], | |
| events: { | |
| "Room1": [{ | |
| "start": 60, | |
| "end": 120, | |
| "title": "Тайская изюминка" | |
| }], | |
| "Room2": [{ | |
| "start": 120, | |
| "end": 240, | |
| "title": "Тайская изюминка", | |
| "canceled": true | |
| }] | |
| }, | |
| start: 10, | |
| end: 20, | |
| timeRange: 10 | |
| } | |
| /*methods: { | |
| add: !-> | |
| this.items.push {text: this.todoText} | |
| this.todoText = '' | |
| delete: (ev) !-> | |
| this.items.remove ev.targetVM.$data | |
| deleteAll: !-> | |
| #e = this.items | |
| #pop = e.pop.bind e | |
| #[0 to e.length].forEach pop | |
| this.items = [] | |
| }*/ | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment