Programmiererforum

Code: Select all

https://codepen.io/Yu-Tub/pen/vEEQemo

Code: Select all

< /code>
CSS < /p>
body {
padding-top: 60px;
/* 60px to make the container go all the way to the bottom of the topbar */
}

#schedule .sc_bar_insert {
background-color: #ff678a;
}

#schedule .example2 {
background-color: #3eb698;
}

#schedule .example3 {
color: #2c0000;
font-weight: bold;
background-color: #c7ae50;
}

#schedule .sc_bar.sc_bar_photo .head,
#schedule .sc_bar.sc_bar_photo .text {
padding-left: 60px;
}

#schedule .sc_bar.sc_bar_photo .photo {
position: absolute;
left: 10px;
top: 10px;
width: 35px;
}

#schedule .sc_bar.sc_bar_photo .photo img {
max-width: 100%;
border-radius: 50px;
}

#current-time-line {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
height: 100%;
background-color: red;
z-index: 1000;
}
< /code>
js < /p>
$(function () {

function updateTimeLine() {
// Get current time
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();

// Test only
hours = hours - 1;

// Calculate position
var position = 120 * (hours + minutes / 60) - 581;

// Update or create line
var $timeline = $("#current-time-line");
if ($timeline.length === 0) {
$timeline = $('');

$("#schedule").append($timeline);
}

$timeline.css("left", position + "px");
}

$("#logs").append('');
var isDraggable = false;
var isResizable = false;

var $sc = $("#schedule").timeSchedule({
startTime: "07:00", // schedule start time(HH:ii)
endTime: "17:00", // schedule end time(HH:ii)
widthTime: 30 * 10, // cell timestamp example 10 minutes
widthTimeX: 10,
timeLineY: 60, // height(px)
verticalScrollbar: 20, // scrollbar (px)
timeLineBorder: 2, // border(top and bottom)
bundleMoveWidth: 6, // width to move all schedules to the right of the clicked time line cell
dataWidth: 120,
rows: {
0: {
title: "Taro",
subtitle: "Developer",
schedule: [
{
start: "08:00",
end: "10:00",
text: "Meeting",
data: {
class: "example2",
image:
"https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/1.png",
},
},
{
start: "09:30",
end: "11:20",
text: "Interview(Aika)",
data: {
class: "example3",
image:
"https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/2.png",
},
},
{
start: "13:00",
end: "18:00",
text: "Go out",
data: {},
},
],
},
1: {
title: "Saito",
subtitle: "Management",
schedule: [
{
start: "08:00",
end: "10:00",
text: "Meeting",
data: {
class: "example2",
image:
"https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/1.png",
},
},
],
},
2: {
title: "Daisuke Kato",
subtitle: "Management",
schedule: [
{
start:  "11:00",
end: "14:00",
text: "Go out",
data: {
image:
"https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/3.png",
},
},
],
},
},
onAppendSchedule: function (node, data) {
if (data.data.class) {
node.addClass(data.data.class);
}
if (data.data.image) {
var $img = $('');
$img.find("img").attr("src", data.data.image);
node.prepend($img);
node.addClass("sc_bar_photo");
}
},
});

updateTimeLine();
setInterval(updateTimeLine, 10000);
});