Hallo,
ich habe eine Frage. Ich habe diesen "Stundenplan" gefunden, der für mein Vorhaben passt.
Kann ich die Events (bei var events) aus einer Datenbank auslesen? Und wenn ja wie mache ich dies am besten?
Ich möchte nämlich, dass die Events dynamisch im Stundenplan angezeigt werden.
Über Hilfe würde ich mich sehr freuen.
ich habe eine Frage. Ich habe diesen "Stundenplan" gefunden, der für mein Vorhaben passt.
Code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery.skedTape</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="jquery.skedTape.css">
<style>
.bd-footer {
font-size: .875rem;
text-align: center;
background-color: #f7f7f7;
}
.bd-footer a {
font-weight: 600;
color: #495057;
}
.bd-footer a:focus, .bd-footer a:hover {
color: #007bff;
}
.bd-footer p {
margin-bottom: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">jQuery.skedTape</a>
<span class="navbar-text">Schedule widget for jQuery</span>
</div>
</nav>
<div class="container mt-4">
<!-- EXAMPLE 1 -->
<div class="mb-4">
<h2 class="mb-3">1. All-in-one example</h2>
<div class="alert alert-primary mb-3">
<ul class="mb-0">
<li>Click on an event to move it.</li>
<li>Click on empty space of the timeline to add a new event on predefined position.</li>
<li>Use +- keys to change zooming level.</li>
<li>Use vertical mouse wheel to scroll timeline horizontally.</li>
</ul>
</div>
<div class="mb-2" id="sked1"></div>
<small>
<span class="text-danger">*</span>
To make the example lightweight the timezones in here
are set disregarding the DST, so they may be different
from the actual ones, that's ok.
</small>
</div>
<!-- EXAMPLE 2 -->
<div class="mb-4">
<h2 class="mb-3">2. Deferred rendering demo</h2>
<div class="alert alert-primary mb-3">
See the sources of this example to know how to initialize
the component with its actual rendering postponed. Note
that tzOffset = 0 in this example.
</div>
<div id="sked2"></div>
</div>
<!-- EXAMPLE 3 -->
<div class="mb-4">
<h2 class="mb-3">3. Showing in tabs and modals</h2>
<div class="my-4">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Show in modal
</button>
</div>
<ul class="nav nav-tabs" id="nav1">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#empty-tab">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#sked-tab">Schedule</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="empty-tab">
It's an initial tab, there is nothing here.<br>
Switch to the other tab.
</div>
<div class="tab-pane fade" id="sked-tab">
<div id="sked4"></div>
</div>
</div>
</div>
</div>
<!-- EXAMPLE 3 - MODAL -->
<div class="modal" tabindex="-1" role="dialog" id="modal1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Some modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="sked3"></div>
</div>
</div>
</div>
</div>
<footer class="bd-footer text-muted">
<div class="container p-3 p-md-5">
<p>Code licensed <a href="https://github.com/lexkrstn/jquery-sked-tape/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, see docs on <a href="https://github.com/lexkrstn/jquery-sked-tape" target="_blank" rel="license noopener">GitHub</a>.</p>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
<script src="jquery.skedTape.js"></script>
<script type="text/javascript">
// --------------------------- Data --------------------------------
var locations = [
{id: '1', name: 'Gleis 1', tzOffset: 7 * 60},
{id: '2', name: 'Sydney', tzOffset: -10 * 60},
{id: '3', name: 'New York', tzOffset: 4 * 60},
{id: 'london', name: 'London', tzOffset: -1 * 60},
{id: '5', name: 'Copenhagen', tzOffset: -2 * 60},
{id: '6', name: 'Berlin', tzOffset: -2 * 60},
];
var events = [
{
name: 'Meeting 1',
location: 'london',
start: today(4, 15),
end: today(7, 30)
},
{
name: 'Meeting 2 (ovelapping)',
location: 'london',
start: today(6, 30),
end: today(9, 15)
},
{
name: 'Meeting 3 (ovelapping)',
location: 'london',
start: today(9, 0),
end: today(11, 30)
},
{
name: 'Meeting 4 (ovelapping)',
location: 'london',
start: today(7, 45),
end: today(8, 30)
},
{
name: 'Meeting 5 (ovelapping)',
location: 'london',
start: today(8, 0),
end: today(8, 15)
},
{
name: 'Meeting',
location: '1',
start: today(0, 0),
end: today(1, 30)
},
{
name: 'Meeting',
location: '5',
start: today(0, 0),
end: today(1, 30)
},
{
name: 'Meeting',
location: '1',
start: today(10, 0),
end: today(11, 30)
},
{
name: 'Meeting with custom class',
location: '2',
start: yesterday(22, 0),
end: today(1, 30),
class: 'custom-class'
},
{
name: 'Meeting just after the previous one',
location: '2',
start: today(1, 45),
end: today(2, 45),
class: 'custom-class'
},
{
name: 'And another one...8888',
location: '2',
start: today(3, 10),
end: today(5, 30),
class: 'custom-class'
},
{
name: 'Disabled meeting',
location: '3',
start: yesterday(22, 15),
end: yesterday(23, 30),
disabled: true
},
{
name: 'Meeting',
location: '3',
start: yesterday(23, 45),
end: today(1, 30)
},
{
name: 'Meeting that started early',
location: '6',
start: yesterday(21, 45),
end: today(0, 45)
},
{
name: 'Late meeting',
location: '5',
start: today(11, 15),
end: today(13, 45)
},
];
// -------------------------- Helpers ------------------------------
function today(hours, minutes) {
var date = new Date();
date.setHours(hours, minutes, 0, 0);
return date;
}
function yesterday(hours, minutes) {
var date = today(hours, minutes);
date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
return date;
}
function tomorrow(hours, minutes) {
var date = today(hours, minutes);
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
return date;
}
// --------------------------- Example 1 ---------------------------
var $sked1 = $('#sked1').skedTape({
caption: 'Cities',
start: yesterday(22, 0),
end: today(12, 0),
showEventTime: true,
showEventDuration: true,
scrollWithYWheel: true,
locations: locations.slice(),
events: events.slice(),
maxTimeGapHi: 60 * 1000, // 1 minute
minGapTimeBetween: 1 * 60 * 1000,
snapToMins: 1,
editMode: true,
timeIndicatorSerifs: true,
showIntermission: true,
formatters: {
date: function (date) {
return $.fn.skedTape.format.date(date, 'l', '.');
},
duration: function (ms, opts) {
return $.fn.skedTape.format.duration(ms, {
hrs: 'ч.',
min: 'мин.'
});
},
},
canAddIntoLocation: function(location, event) {
return location.id !== 'london';
},
postRenderLocation: function($el, location, canAdd) {
this.constructor.prototype.postRenderLocation($el, location, canAdd);
$el.prepend('<i class="fas fa-thumbtack text-muted"/> ');
}
});
$sked1.on('event:dragEnded.skedtape', function(e) {
console.log(e.detail.event);
});
$sked1.on('event:click.skedtape', function(e) {
$sked1.skedTape('removeEvent', e.detail.event.id);
});
$sked1.on('timeline:click.skedtape', function(e, api) {
try {
$sked1.skedTape('startAdding', {
name: 'New meeting',
duration: 60 * 60 * 1000
});
}
catch (e) {
if (e.name !== 'SkedTape.CollisionError') throw e;
//alert('Already exists');
}
});
</script>
</body>
</html>
Kann ich die Events (bei var events) aus einer Datenbank auslesen? Und wenn ja wie mache ich dies am besten?
Ich möchte nämlich, dass die Events dynamisch im Stundenplan angezeigt werden.
Über Hilfe würde ich mich sehr freuen.
- ich probiere es aus und melde mich dann nochmal.
Kommentar