has date picker field for boundary dates

css/bts_timesheet.css

@@ -4,16 +4,18 @@ body {
     overflow: hidden;
 }
 
-.bts_hidden{
-	z-index: -1;
+.bts_hidden {
+    z-index: -1;
 }
 
 .blink_me {
-	animation: blinker 0.3s linear infinite;
+    animation: blinker 0.3s linear infinite;
 }
 
-@keyframes blinker { 
-	50% { opacity: 0; }
+@keyframes blinker {
+    50% {
+        opacity: 0;
+    }
 }
 
 .titlebar_gradient {
@@ -25,12 +27,11 @@ body {
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
 }
 
-
-.sheettitle h1:hover{
-	text-decoration: underline;
-	font-weight: bolder;
-	cursor: pointer;
-	animation: blinker 1s linear infinite;
+.sheettitle h1:hover {
+    text-decoration: underline;
+    font-weight: bolder;
+    cursor: pointer;
+    animation: blinker 1s linear infinite;
 }
 
 .timesheets {
@@ -79,13 +80,12 @@ body {
 }
 
 .timesheets .workspace img {
-	display: block;
-	margin-top: 140px;
-	margin-left:auto;
-	margin-right:auto;
+    display: block;
+    margin-top: 140px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-
 .timesheets .statusbar {
     position: relative;
     height: 40px;
@@ -131,7 +131,8 @@ body {
     height: calc(100vh - 80px);
     background-color: dimgrey;
     overflow: hidden;
-	text-align: center;
+    text-align: center;
+
     /*    scroll-behavior: smooth;  */
 }
 
@@ -245,7 +246,8 @@ div.peopleitem label:hover :checked + .card {
 }
 
 .statusbar .wifi i,
-.statusbar .xero i {
+.statusbar .xero i,
+.statusbar .csv i {
     font-size: 20px;
     color: red;
     position: absolute;
@@ -257,7 +259,7 @@ div.peopleitem label:hover :checked + .card {
     width: 40px;
     height: 100%;
     margin-left: 0px;
-    margin-right: 100px;
+    margin-right: 5px;
     display: inline-block;
     background-color: white;
     box-shadow: inset 0px 0px 2px black;
@@ -267,8 +269,23 @@ div.peopleitem label:hover :checked + .card {
     box-shadow: 0px 0px 10px white;
 }
 
+.statusbar .csv {
+    width: 40px;
+    height: 100%;
+    margin-left: 0px;
+    margin-right: 5px;
+    display: inline-block;
+    background-color: white;
+    box-shadow: inset 0px 0px 2px black;
+    border-radius: 100px;
+    background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/08/csv.png);
+    background-size: 40px;
+    box-shadow: 0px 0px 10px white;
+}
+
 .statusbar .xero:hover,
-.statusbar .wifi:hover {
+.statusbar .wifi:hover,
+.statusbar .csv:hover {
     box-shadow: 0px 0px 3px black;
 }
 
@@ -293,12 +310,13 @@ div.peopleitem label:hover :checked + .card {
     display: inline-block;
     position: absolute;
     right: 220px;
-	
 }
+
 .statusbar #woh:hover {
-	cursor: pointer;
-	animation: blinker 0.3s linear infinite;
+    cursor: pointer;
+    animation: blinker 0.3s linear infinite;
 }
+
 .workinghours label {
     transform: unset;
     left: 0;
@@ -356,8 +374,8 @@ div.prevweek {
 div.prevweek span:hover,
 div.nextweek span:hover {
     box-shadow: 1px 1px 10px black;
-	border-radius: 20px;
-	color: black;
+    border-radius: 20px;
+    color: black;
 }
 
 div.nextweek {
@@ -383,19 +401,29 @@ div.weekly div {
 
 div.weekly div.weekname {
     position: relative;
-    width: 130px;
+    width: 170px;
     top: -5px;
     border: 2px solid grey;
     border-radius: 10px;
     text-align: center;
-	
-    color: white;	
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
-	background: rgb(181,189,200); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */	
+    color: white;
+
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
+    background: rgb(181,189,200); /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
+}
+
+div.weekly div.weekname input{
+    width: 80px;
+    height: 20px;
+    border:0px;
+    background-color:transparent;
+    color: white;
+    padding-left:4px;
+    padding-right:4px;
 }
 
 div.weekly div.weekname.prev {
@@ -411,10 +439,9 @@ div.weekly div.weekname.next {
 }
 
 div.weekly >div.weekname:hover,
-div.weekly div[name='copyschedule']:hover
-{
-	cursor: pointer;
-	box-shadow: 0px 0px 10px #2c87f0;
+div.weekly div[name='copyschedule']:hover {
+    cursor: pointer;
+    box-shadow: 0px 0px 10px #2c87f0;
 }
 
 div.weekly div.copyprogress {
@@ -425,34 +452,41 @@ div.weekly div.copyprogress {
     top: 0px;
     border-radius: 2px;
     box-shadow: inset 1px 1px 2px black;
-    text-align:center;
-	
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
-	background: rgb(254,252,234); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */	
+    text-align: center;
+
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
+    background: rgb(254,252,234); /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
 }
 
 div.copyprogress div[name='copyschedule'] {
     position: relative;
     top: -5px;
-    width: 100px;
+    width: 150px;
     height: 25px;
     padding: 0px;
     border-radius: 10px;
+    margin: auto;
+    z-index: 1;
+    color: white;
 
-    margin:auto;
-    z-index:1;
-	
-	color: white;	
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
-	background: rgb(181,189,200); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */	
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
+    background: rgb(181,189,200); /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
+}
+
+#gotoweek {
+    width: 50%;
+    background-color: transparent;
+    border: 0px;
+    color: white;
+    font-weight: 900;
 }
 
 div.weekdays {
@@ -475,29 +509,32 @@ div.week2 {
     padding-left: 10px;
     padding-right: 10px;
 }
+
 div.week1:hover,
 div.week2:Hover {
-	border-radius: 20px;
-	box-shadow: 0px 0px 2px #2c87f0 inset; 
-	cursor: pointer;
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
-	background: rgb(235,241,246); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */	
+    border-radius: 20px;
+    box-shadow: 0px 0px 2px #2c87f0 inset;
+    cursor: pointer;
+
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
+    background: rgb(235,241,246); /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
 }
 
 div.week1.filtered,
-div.week2.filtered{
-	border-radius: 20px;
-	/* background:white; */
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
-	background: rgb(235,241,246); /* Old browsers */
-	background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */	
+div.week2.filtered {
+    border-radius: 20px;
+
+    /* background:white; */
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
+    background: rgb(235,241,246); /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
 }
 
 div.week1:after,
@@ -525,40 +562,43 @@ div.week2 > div {
     height: 40px;
     margin-top: 5px;
     font-weight: bolder;
-	border-radius: 10px;
+    border-radius: 10px;
 }
 
 div.week1 div:hover,
-div.week2 div:hover
-{
-	cursor:pointer;
-	box-shadow: 0px 0px 10px red;
+div.week2 div:hover {
+    cursor: pointer;
+    box-shadow: 0px 0px 10px red;
 }
 
 div.week1 > div {
     box-shadow: 0px 0px 10px white inset;
 }
-.week1color{
-	color: black;
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
-	background: #ebe9f9; /* Old browsers */
-	background: -moz-linear-gradient(top,  #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */
+
+.week1color {
+    color: black;
+
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
+    background: #ebe9f9; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */
 }
 
 div.week2 > div {
     box-shadow: 0px 0px 10px white inset;
 }
-.week2color{
-	color:white;
-	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
-	background: #627d4d; /* Old browsers */
-	background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
+
+.week2color {
+    color: white;
+
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
+    background: #627d4d; /* Old browsers */
+    background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
 }
 
 div.assignment > div {
@@ -624,11 +664,11 @@ div.blueTable {
     width: 100%;
     text-align: left;
     border-collapse: collapse;
-	border:0px;
+    border: 0px;
 }
 
-div.blueTable.emptyrecord{
-	background-color: #eeeeee;
+div.blueTable.emptyrecord {
+    background-color: #eeeeee;
 }
 
 .divTable.blueTable .divTableCell,
@@ -703,31 +743,30 @@ div.blueTable.emptyrecord{
 /* DivTable.com */
 .divTable {
     display: table;
-	margin: 3px 0px 3px 0px;
+    margin: 3px 0px 3px 0px;
 }
 
-.divTable.highlight{
-	box-shadow: 1px 1px 10px green;
+.divTable.highlight {
+    box-shadow: 1px 1px 10px green;
 }
 
-.divTable.invalidjob.highlight{
-	box-shadow: 1px 1px 10px #f50202;
+.divTable.invalidjob.highlight {
+    box-shadow: 1px 1px 10px #f50202;
 }
 
-.divTable.highlight.newcopy{
-	box-shadow: 1px 1px 10px orange;
-	border:5px orange solid;
+.divTable.highlight.newcopy {
+    box-shadow: 1px 1px 10px orange;
+    border: 5px orange solid;
 }
 
-
 .divTableRow {
     display: table-row;
 }
 
-.divTableRow.errmsg{
-	background-color:white;
-	font-weight:bolder;
-	color:red;
+.divTableRow.errmsg {
+    background-color: white;
+    font-weight: bolder;
+    color: red;
 }
 
 .divTableHeading {
@@ -778,120 +817,126 @@ div.btos {
 }
 
 div.bstart,
-div.bfinish{
-	width:11%;
+div.bfinish {
+    width: 11%;
 }
 
-div.brate{
-	width: 10%;
-	max-width: 20px;
-}
-.divTable div > select{
-	width: 100%;
-	height: 100%;
+div.brate {
+    width: 10%;
+    max-width: 20px;
 }
 
+.divTable div > select {
+    width: 100%;
+    height: 100%;
+}
 
 div.bdelete,
 div.bsave,
 div.bconfirmed {
-	text-align:center;
+    text-align: center;
     width: 5%;
 }
 
-div.brating{
+div.brating {
     text-align: center;
-	cursor: pointer;
+    cursor: pointer;
 }
 
-
 .brating {
-  unicode-bidi: bidi-override;
-  direction: rtl;
+    unicode-bidi: bidi-override;
+    direction: rtl;
 }
+
 div.workspace .brating > span:hover:before,
 div.workspace .brating > span:hover ~ span:before {
-   content: "\2605";
-   position: absolute;
+    content: "\2605";
+    position: absolute;
 }
 
-div.bsave span.ticon-copy{
+div.bsave span.ticon-copy {
     display: none;
 }
-div.bsave span.ticon-save{
+
+div.bsave span.ticon-save {
     display: inline-block;
-	border: 3px solid lightgrey;
+    border: 3px solid lightgrey;
     padding: 5px;
     border-radius: 5px;
-    color: black;	
-	cursor: pointer;	
-	
+    color: black;
+    cursor: pointer;
 }
-div.bsave.saved span.ticon-save{
+
+div.bsave.saved span.ticon-save {
     display: none;
 }
 
-div.bsave.saved span.ticon-copy{
+div.bsave.saved span.ticon-copy {
     display: inline-block;
     border: 3px solid orange;
     padding: 5px;
     border-radius: 20px;
-    color: orange;	
+    color: orange;
 }
-div.bdelete span.ticon-trash{
+
+div.bdelete span.ticon-trash {
     display: inline-block;
     border: 3px solid lightgrey;
     padding: 5px;
     border-radius: 5px;
-    color: red;	
-	cursor: pointer;
+    color: red;
+    cursor: pointer;
 }
 
-div.workspace div > span:hover{
-	box-shadow:0px 0px 10px black;
+div.workspace div > span:hover {
+    box-shadow: 0px 0px 10px black;
 }
 
-div.divTableHeading div > span:hover{
-	cursor: pointer;
-	animation: blinker 0.3s linear infinite;
+div.divTableHeading div > span:hover {
+    cursor: pointer;
+    animation: blinker 0.3s linear infinite;
 }
 
 /* short code for the table */
 div.btos select,
 div.bstart input,
-div.bfinish input{
-	width: 100%;
-	height: 98%;
+div.bfinish input {
+    width: 100%;
+    height: 98%;
 }
 
-div.divTable.validjob{
-	border: 0px solid white;
+div.divTable.validjob {
+    border: 0px solid white;
 }
 
-div.divTable.invalidjob{
-	border-left: 2px solid red;
-	border-right: 2px solid red;
+div.divTable.invalidjob {
+    border-left: 2px solid red;
+    border-right: 2px solid red;
 }
 
-div.divTable .invalid{
-	background-color:yellow;
+div.divTable .invalid {
+    background-color: yellow;
 }
-/* end of div table */
 
+/* end of div table */
 /* pop up message box */
-.bts_message .ult_modal-body{
-	height:50vh;
-	overflow:scroll;
+.bts_message .ult_modal-body {
+    height: 50vh;
+    overflow: scroll;
 }
-.bts_message .ult_modal-body .sent{
-	color: green;
+
+.bts_message .ult_modal-body .sent {
+    color: green;
 }
-.bts_message .ult_modal-body .nojob{
-	color: dimgrey;
+
+.bts_message .ult_modal-body .nojob {
+    color: dimgrey;
 }
-.bts_message .ult_modal-body .error{
-	color : red;
+
+.bts_message .ult_modal-body .error {
+    color: red;
 }
-.bts_message .ult_modal-body .span{
-	font-weight:900;	
+
+.bts_message .ult_modal-body .span {
+    font-weight: 900;
 }

html/timesheet.html

@@ -0,0 +1,195 @@
+    <div class='peoplebar left'>
+        <div class='b_search titlebar_gradient'>
+            <span class="ticon ticon-search"></span>
+            <input type="text" placeholder="staff">
+            <span class="ticon ticon-times-circle-o"></span>
+        </div>
+        <button class='peoplelist' name='up'>
+            <span class="ticon ticon-angle-double-up"></span>
+        </button>
+        <div class="stafflist userlist">
+            <img>
+        </div>         
+        <button class='peoplelist' name='down'>
+            <span class="ticon ticon-angle-double-down"></span>
+        </button>
+    </div>
+    <div class='peoplebar right'>
+        <div class='b_search titlebar_gradient'>
+            <span class="ticon ticon-search"></span>
+            <input type="text" placeholder="client">
+            <span class="ticon ticon-times-circle-o"></span>
+        </div>
+        <button class='peoplelist' name='up'>
+            <span class="ticon ticon-angle-double-up"></span>
+        </button>
+        <div class="clientlist userlist">
+            <img>
+        </div>         
+        <button class='peoplelist' name='down'>
+            <span class="ticon ticon-angle-double-down"></span>
+        </button>
+    </div>
+    <div class='timesheets'>
+        <div class='sheettitle titlebar_gradient'>
+            <h1>Web Office -  Today:<span name='today'> Today </span> </h1>
+        </div>
+        <div class='sheetsheader'>
+            <div class='weekly'>
+                <div class='weekname prev'> 
+                    <input id='week1b' type=text class='boundary_datepicker' value="2019-07-01" placeholder="2019-07-01">Week
+                    <span name='week1'>10</span>
+                    <i class="ticon ticon-caret-right"></i>
+                </div>
+                <div class='copyprogress'>
+                    <div name='copyschedule'>
+                        Add a Job 
+                        <span class='ticon ticon-plus'></span>
+                    </div>
+                </div>
+                <div class='weekname next'>
+                    <i class="ticon ticon-caret-left"></i>
+                    Week 
+                    <span name='week2'>11</span>
+                    <input id='week2b' type=text class='boundary_datepicker' value="2019-07-01" placeholder="2019-07-01">
+                </div>
+                <div class="weekdays">
+                    <div class='week1'>
+                        <div class='week1color'>
+                            <span name='w1n1'>Mon</span>
+                            <br>
+                            <span class="weekday" name='w1d1'>12</span>
+                        </div>
+                        <div class='week1color'>
+                            <span name='w1n2'>Tue</span>
+                            <br>
+                            <span class="weekday" name='w1d2'>12</span>
+                        </div>
+                        <div class='week1color'>
+                            <span name='w1n3'>Wed</span>
+                            <br>
+                            <span class="weekday" name='w1d3'>12</span>
+                        </div>
+                        <div class='week1color'>
+                            <span name='w1n4'>Thu</span>
+                            <br>
+                            <span class="weekday" name='w1d4'>12</span>
+                        </div>
+                        <div class='week1color'>
+                            <span name='w1n5'>Fri</span>
+                            <br>
+                            <span class="weekday" name='w1d5'>12</span>
+                        </div>
+                        <div class='week1color'>
+                            <span name='w1n6'>Sat</span>
+                            <br>
+                            <span class="weekday" name='w1d6'>12</span>
+                        </div>
+                        <div class='week1color'>
+                            <span name='w1n7'>Sun</span>
+                            <br>
+                            <span class="weekday" name='w1d7'>12</span>
+                        </div>
+                    </div>
+                    <div class='week2'>
+                        <div class='week2color'>
+                            <span name='w2n1'>Mon</span>
+                            <br>
+                            <span class="weekday" name='w2d1'>12</span>
+                        </div>
+                        <div class='week2color'>
+                            <span name='w2n2'>Tue</span>
+                            <br>
+                            <span class="weekday" name='w2d2'>12</span>
+                        </div>
+                        <div class='week2color'>
+                            <span name='w2n3'>Wed</span>
+                            <br>
+                            <span class="weekday" name='w2d3'>12</span>
+                        </div>
+                        <div class='week2color'>
+                            <span name='w2n4'>Thu</span>
+                            <br>
+                            <span class="weekday" name='w2d4'>12</span>
+                        </div>
+                        <div class='week2color'>
+                            <span name='w2n5'>Fri</span>
+                            <br>
+                            <span class="weekday" name='w2d5'>12</span>
+                        </div>
+                        <div class='week2color'>
+                            <span name='w2n6'>Sat</span>
+                            <br>
+                            <span class="weekday" name='w2d6'>12</span>
+                        </div>
+                        <div class='week2color'>
+                            <span name='w2n7'>Sun</span>
+                            <br>
+                            <span class="weekday" name='w2d7'>12</span>
+                        </div>                         
+                    </div>
+                </div>
+            </div>
+            <div class='prevweek left'>
+                <span class="ticon ticon-arrow-circle-left"></span>
+            </div>
+            <div class='nextweek right'>
+                <span class="ticon ticon-arrow-circle-right"></span>
+            </div>
+            <div class="sheettableheader">
+                <div class="divTable blueTable">
+                    <div class="divTableHeading">
+                        <div class="divTableRow">
+                            <div class="divTableHead btos">Type of Service</div>
+                            <div class="divTableHead bstart">Start</div>
+                            <div class="divTableHead bfinish">Finish</div>
+                            <div class="divTableHead brate">Hourly Rate</div>
+                            <div class="divTableHead bstaff">Staff</div>
+                            <div class="divTableHead bclient">Client</div>
+                            <div class="divTableHead bconfirmed">Ack</div>
+                            <div class="divTableHead brating">
+                                <span class="ticon ticon-star"></span> 
+                                <span class="ticon ticon-star"></span> 
+                                <span class="ticon ticon-star"></span> 
+                                <span class="ticon ticon-star"></span> 
+                                <span class="ticon ticon-star"></span> 
+                            </div>
+                            <div class="divTableHead bdelete">
+                                <span class="ticon ticon-plus"></span>
+                            </div>
+                            <div class="divTableHead bsave">
+                                <span class="ticon ticon-save"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class='workspace'>
+            <img src="#">
+        </div>
+        <div class='statusbar titlebar_gradient'>
+            <div class='xero'>
+                <i class="ticon  ticon-times"></i>
+            </div>
+            <div class='wifi'>
+                <i class="ticon  ticon-times"></i>
+            </div>
+            <div class='csv'>
+                <i class="ticon  ticon-times"></i>
+            </div>
+            <div class='wages'>
+                $
+                <div name='number'>
+                    3214
+</div>
+            </div>
+            <div class='workinghours'>
+                <label for='woh'> Total Hours</label>
+                <input id="woh" type="text" value="1553.5" readonly>
+            </div>
+            <button name='confirmschedule'>
+                Confirm Schedule
+</button>
+        </div>
+    </div>

js/bts_timesheet.js

@@ -213,6 +213,13 @@
 			else
 				$('div.wifi i').hide();
 		}
+		function csv(t){
+			if (t)
+				$('div.csv i').show();
+			else
+				$('div.csv i').hide();
+		}
+
 		
 		function init_user_search(){
 			$('div.b_search input').keyup(debounce(function(e){
@@ -858,31 +865,45 @@
 		
 		function init_weekdays(){
 			var curr = new Date; // get current date
-			// First day is the day of the month - the day of the week
+			init_weekdays_by_anchor(curr, true);
+			return;
+		}
+
+		function init_weekdays_by_anchor(anchor, is_week1){
+			var curr = new Date(anchor); // get the date;
+			
+			if (!is_week1){ //it is week2, shift for 7 days;
+				curr.setDate(curr.getDate() -7); //curr will be changed; 
+			}
+
 			var first = curr.getDate() - curr.getDay() + 1; //+1 we want Mon as first 
 			var last = first + 6; // last day is the first day + 6
-
-			//var firstday = new Date(curr.setDate(first)); //Mon
-			//var lastday = new Date(curr.setDate(last)); //Sun
+			
+			if (curr.getDay() == 0 ){// it's Sunday;
+				last = curr.getDate();
+				first = last - 6;
+			}
+			
 			
 			var pos = 1; //first lot
 			for (var i=first; i<=last; i++)
 			{
-				var now = new Date;
+				var now = new Date(curr);
 				var d1 = new Date(now.setDate(i));
-				now = new Date;
+				now = new Date(curr);
 				var d2 = new Date(now.setDate(i+7));
 				set_day_number(1,pos, d1); //week 1
 				set_day_number(2,pos, d2); //week 2
 				pos +=1;
 			}
 		}
+
 		
 		function set_day_number(week, index, date){
 			var selector = 'span[name="w'+week+'d'+index+'"]';
 			$(selector).html(date.getDate());
 			$(selector).data({date:date});
-			console.log('set w%d-d%d %o', week,index,date);
+			//console.log('set w%d-d%d %o', week,index,date);
 		}
 		
 		function set_today(){
@@ -905,6 +926,16 @@
 			var num = date.get_week_number();
 			$('div.weekly span[name="week1"]').html(num);
 			$('div.weekly span[name="week2"]').html(num+1);
+			
+			set_week_boundry();
+		}
+		
+		function set_week_boundry()
+		{
+			var date = $('span[name="w1d1"]').data().date;
+			$('#week1b').attr('value', format_date(date));
+			var date = $('span[name="w2d7"]').data().date;
+			$('#week2b').attr('value', format_date(date));
 		}
 		
 		function number_of_unsaved_job(){
@@ -928,7 +959,7 @@
 				$(e).data({data:newdate});
 			});
 			set_week_number();
-			load_timesheet();
+			debounced_load_timesheet();
 		});
 		$('div.nextweek.right').click(function(){
 			if (number_of_unsaved_job() > 0){
@@ -943,9 +974,19 @@
 				$(e).data({data:newdate});
 			});
 			set_week_number();
-			load_timesheet();
+			debounced_load_timesheet();
 		});
 		
+		$('div.weekly div.weekname.prev >input ').click(function(e){
+			e.stopPropagation();
+		});		
+		$('div.weekly div.weekname.prev >input ').change(function(e){
+			var date = $('#week1b').attr('value');
+			init_weekdays_by_anchor(date, true);
+			set_week_number();
+			debounced_load_timesheet();
+		});		
+		
 		$('div.weekly div.weekname.prev').click(function(){
 			if (!confirm ('copy entire week to next week? '))
 				return;
@@ -970,11 +1011,25 @@
 			show_jobs(job_els);
 			debounced_calculate();
 		});
+
+		$('div.weekly div.weekname.next > input').click(function(e){
+			e.stopPropagation();
+		});
 		
-		$('div.weekly div.weekname.next').click(function(){
-			alert('you can only copy from past to future (left to right)');
+		$('div.weekly div.weekname.next >input ').change(function(e){
+			e.stopPropagation();
+			var date = $('#week2b').attr('value');
+			init_weekdays_by_anchor(date, false);
+			set_week_number();
+			debounced_load_timesheet();
+		});		
+		
+		
+		$('div.weekly div.weekname.next').click(function(e){
+			$(e).find('input').trigger('click');
 		});
 		
+
 		$('div.week1 > div').click(function(e){
 			e.stopPropagation();
 			if ($('div.bstart input.blink_me').length == 0){
@@ -1066,7 +1121,7 @@
 			$('div.bstart input').removeClass('blink_me');
 		}
 		
-		$('div.sheettitle h1').click(function(){
+		$('div.sheettitle h1 span').click(function(){
 			reset_title_to_today();
 			load_timesheet();
 		});
@@ -1077,6 +1132,7 @@
 			set_week_number();
 		}
 
+		var debounced_load_timesheet = debounce(load_timesheet,1000);
 		
 		function load_timesheet()
 		{
@@ -1340,6 +1396,7 @@
 			list_clients();
 			xero(false);
 			wifi(false);
+			csv(false);
 			init_user_search();
 			//ajax_earning_rate();
 			reset_title_to_today();
@@ -1411,7 +1468,8 @@
 //		}
 		
 		init_ts();
-
+//		$( "#week1b" ).datepicker("option", "dateFormat", "yy-mm-dd");
+//		$( "#week2b" ).datepicker("option", "dateFormat", "yy-mm-dd");
 		
 /*________________________________________________________________________*/    	
     });

js/feedback_card.js

@@ -160,9 +160,14 @@
         
         function get_this_week_start(){
     		var curr = new Date; // get current date
-    		// First day is the day of the month - the day of the week
     		var first = curr.getDate() - curr.getDay() + 1; //+1 we want Mon as first 
     		var last = first + 6; // last day is the first day + 6
+    		// First day is the day of the month - the day of the week
+    		if(curr.getDay()==0)//sunday
+    		{
+    			last = curr.getDate();
+    			first = last - 6;
+    		}
 
     		var firstday = new Date(curr.setDate(first)); //Mon
     		firstday.setHours(0,0,0);

ts.php

@@ -47,6 +47,8 @@ class AcareOffice{
         add_shortcode( 'bts_type_of_service', array($this, 'bts_type_of_service'));
         add_shortcode( 'bts_staff_job_summary', array($this, 'bts_staff_job_summary'));
         add_shortcode( 'bts_feedback_card', array($this, 'bts_feedback_card'));
+        add_shortcode( 'bb_timesheet_canvas', array($this, 'bb_timesheet_canvas'));
+        
         
         //user profile page
         add_shortcode( 'bts_user_name', array($this,'bts_user_name'));
@@ -553,7 +555,10 @@ class AcareOffice{
     {
         return $this->template('bts_feedback_card', 'feedback_card.html');
     }
-    
+    public function bb_timesheet_canvas($attr)
+    {
+        return file_get_contents(plugin_dir_path(__FILE__) . "/html/timesheet.html");
+    }
     //generate template based on html file
     private function template($id, $file)
     {