lion/calender.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: lion:031e6c00bd8aaf7f41be6f4980298ca11e823a51
Branches Tags
lion:master
...
compare: lion:28e1c4304bba071c3d90f24a576520a274f0b8ea
Branches Tags
lion:master

2 commits
031e6c00bd ... 28e1c4304b

Author SHA1 Message Date
Alexander Mahr
28e1c4304b add calender weeks 2025-02-15 21:14:02 +01:00
Alexander Mahr
59abe2e50b snap scroll horizontally (for weeksview)w 2025-02-15 19:29:44 +01:00
1 changed files with 154 additions and 84 deletions
Show stats Expand all files Collapse all files

238
app/assets/index.html
View file

@ -6,26 +6,24 @@
</head> </head>
<style> <style>
* { * {
font-family: sans; font-family: sans;
box-sizing:border-box; box-sizing:border-box;
} }
body,html{ body,html{
background-color:#ffa; background-color:#ffa;
margin:0; margin:0;
padding:0 padding:0;
width:100vw;
height:100vh;
overflow:hidden;
} }
.infinityScroll{ .infinityScroll{
height:50vh; height:50vh;
overflow:scroll; overflow:scroll;
position:relative; position:relative;
} }
* {
font-family: sans;
}
/* disable pinch-zoom*/ /* disable pinch-zoom*/
:root { :root {
touch-action: pan-x pan-y; touch-action: pan-x pan-y;
@ -41,21 +39,40 @@ position:relative;
/*margin:5px;*/ /*margin:5px;*/
/* scroll-snap-align: center;*/ /* scroll-snap-align: center;*/
overflow:hidden; overflow:hidden;
transition: all 0s ease-in-out;
}
.weekview {
background-color:rgba(255,255,255,0.5);
border:2px solid rgba(0,0,0,0.5);
border-radius: 10%;
margin:5px;
min-height: 20vw;
/*margin:5px;*/
/* scroll-snap-align: center;*/
overflow:hidden;
transition: all 0s ease-in-out;
} }
.label{ .label{
background-color:#a44; background-color:#a44;
color:#fff; color:#fff;
font-size:10vw; font-size:1cm;
text-align:center; text-align:center;
} }
.days{ .monthview > .days{
display: grid; display: grid;
width: 100%; width: 100%;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
} }
.weekview > .days{
display: grid;
width: 100%;
grid-template-columns: repeat(1, 1fr);
}
.days div { .days div {
text-align:center; text-align:center;
height: 2cm; height: 2cm;
@ -67,25 +84,57 @@ position:relative;
background-color:white; background-color:white;
} }
#mainDiv{ #weeksDiv{
/*background: linear-gradient(white,#aaf);*/
background-color: #aaf;
position: absolute;
top:0;
left:100vw;
}
#weeksDiv, #monthsDiv{
box-sizing:border-box; box-sizing:border-box;
margin:0; margin:0;
/* scroll-snap-type: y mandatory;*/ scroll-snap-align: start;
height:100vh; height:100vh;
overflow:scroll; overflow:scroll;
margin:0; margin:0;
width:100vw; width:100vw;
} }
.orig{ .orig{
box-shadow: 0 0 10px grey; box-shadow: 0 0 10px grey;
} }
#all{
scroll-snap-type: x mandatory;
width:100vw;
overflow-x:scroll;
overflow-y:hidden;
height:100vh;
position:relative;
}
</style> </style>
<body> <body>
<div id="mainDiv" class="infinityScroll"></div> <div id="all">
<div id="monthsDiv" class="infinityScroll"></div>
<div id="weeksDiv" class="infinityScroll"></div>
</div>
<script> <script>
//firstMon = new Date(Date.UTC(2017,0,4)); firstMon.setUTCDate(firstMon.getUTCDate()-((firstMon.getUTCDay()+6)%7));
Date.prototype.getWeekNumber = function(){
var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
var dayNum = d.getUTCDay() || 7;
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
return Math.ceil((((d - yearStart) / 86400000) + 1)/7)
};
window.addEventListener("load",()=>{ window.addEventListener("load",()=>{
var locale = window.navigator.userLanguage || window.navigator.language || "en"; var locale = window.navigator.userLanguage || window.navigator.language || "en";
@ -100,10 +149,46 @@ window.addEventListener("load",()=>{
var daysDiv = document.createElement("div"); var daysDiv = document.createElement("div");
daysDiv.className="days"; daysDiv.className="days";
monthviewDiv.appendChild(daysDiv); monthviewDiv.appendChild(daysDiv);
monthviewDiv.scrollIntoView();
var day = new Date(date); var day = new Date(date);
day.setDate(1); day.setDate(1);
while(day.getMonth() == date.getMonth()){ while(day.getMonth() == date.getMonth()){
var dayDiv = document.createElement("div");
dayDiv.className = "day";
var column = day.getDay() || 7;
column = column == 0 ? 7: column;
if(column>=6){
dayDiv.classList.add("weekend");
}
dayDiv.style.gridColumn = column;
dayDiv.textContent = day.getDate();
daysDiv.appendChild(dayDiv);
day.setDate(day.getDate()+1);
}
return monthviewDiv;
}
function createMonthViewItem(index){
var mdate = new Date();
mdate.setMonth(mdate.getMonth()+index);
var monthViewItem=createMonthView(mdate);
monthViewItem.nnindex=index;
return monthViewItem;
}
function createWeekView(date = new Date()){
var weekviewDiv = document.createElement("div")
weekviewDiv.className = "weekview";
var labelDiv = document.createElement("div");
labelDiv.innerHTML = date.toLocaleString(locale,{"month":"long","year":"numeric"})+"<br>KW "+date.getWeekNumber();
labelDiv.className = "label"
weekviewDiv.appendChild(labelDiv);
var daysDiv = document.createElement("div");
daysDiv.className="days";
weekviewDiv.appendChild(daysDiv);
var day = new Date(date);
day.setDate(day.getDate()-(day.getDay()+6)%7);
for(var i=0;i<7;i++)
{
var dayDiv = document.createElement("div"); var dayDiv = document.createElement("div");
dayDiv.className = "day"; dayDiv.className = "day";
var column = day.getDay(); var column = day.getDay();
@ -111,80 +196,65 @@ window.addEventListener("load",()=>{
if(column>=6){ if(column>=6){
dayDiv.classList.add("weekend"); dayDiv.classList.add("weekend");
} }
dayDiv.style.gridColumn = column; //dayDiv.style.gridColumn = column;
dayDiv.textContent = day.getDate() dayDiv.textContent = day.getDate()
daysDiv.appendChild(dayDiv); daysDiv.appendChild(dayDiv);
day.setDate(day.getDate()+1); day.setDate(day.getDate()+1);
} }
return monthviewDiv; return weekviewDiv;
}
function createWeekViewItem(index){
var mdate = new Date();
mdate.setDate(mdate.getDate()+7*index);
var weekViewItem=createWeekView(mdate);
weekViewItem.nnindex=index;
return weekViewItem;
} }
function makeInfinityScroll(element){ function makeInfinityScroll(element,createItem){
element.nn=element.nn||{"position":0}; var item;
var mdate; //setup initial set of items
for(var i = -3; i< 3; i++){
for(var i = -3; i< 3; i++){ item = createItem(i);
mdate = new Date(); element.appendChild(item);
mdate.setMonth(mdate.getMonth()+i);
var nextMonth=createMonthView(mdate);
nextMonth.nnindex=i;
element.appendChild(nextMonth);
nextMonth.classList.add('orig');
}
element.children[3].scrollIntoView({block:"center"});
element.addEventListener("scroll",()=>{
if(element.scrollUpdateSchedule!=1){
element.scrollUpdateSchedule=1;
requestAnimationFrame(()=>{
element.scrollUpdateSchedule=0;
if(element.scrollTop < 3* element.clientHeight)
{
var beforeind=0;
if(element.firstChild.nnindex){
beforeind = element.firstChild.nnindex
}
mdate = new Date();
mdate.setMonth(mdate.getMonth()+beforeind-1);
var newBefore = createMonthView(mdate);
newBefore.nnindex=beforeind-1;
element.insertBefore(newBefore,element.firstChild);
while(element.scrollHeight>50*element.clientHeight){
element.lastChild.remove();
}
}
if(element.scrollTop > element.scrollHeight - 4* element.clientHeight)
{
var afterind=0;
if(element.lastChild.nnindex){
afterind = element.lastChild.nnindex
}
mdate = new Date();
mdate.setMonth(mdate.getMonth()+afterind+1);
var newAfter = createMonthView(mdate);
newAfter.nnindex=afterind+1;
element.appendChild(newAfter);
while(element.scrollHeight>50*element.clientHeight){
element.firstChild.remove();
}
}
});
}
},false);
} }
element.children[3].scrollIntoView({block:"center"});
// setup "infinity" scroll handling
element.addEventListener("scroll",()=>{
if(element.scrollUpdateSchedule!=1){
element.scrollUpdateSchedule=1;
requestAnimationFrame(()=>{
element.scrollUpdateSchedule=0;
if(element.scrollTop < 3* element.clientHeight)
{
var firstElementChildIndex = element.firstElementChild.nnindex || 0
item = createItem(firstElementChildIndex - 1);
element.insertBefore(item,element.firstElementChild);
document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll); while(element.scrollHeight>50*element.clientHeight){
element.lastElementChild.remove();
}
}
if(element.scrollTop > element.scrollHeight - 4* element.clientHeight)
{
var lastElementChildIndex = element.lastElementChild.nnindex || 0
item = createItem(lastElementChildIndex + 1);
element.appendChild(item)
while(element.scrollHeight>50*element.clientHeight){
element.firstElementChild.remove();
}
}
});
}
},false);
}
makeInfinityScroll(document.querySelector("#monthsDiv"),createMonthViewItem);
makeInfinityScroll(document.querySelector("#weeksDiv"),createWeekViewItem);
// document.querySelectorAll('.infinityScroll').forEach(makeInfinityScroll);
},false); },false);