Hi zusammen,
zum Freitag mal wieder etwas "Spezielles", was mich zum Durchdrehen bringt.
Ich muss einen Kalender bauen und nutze dazu Bootstrap + http://www.bootstrap-year-calendar.com/#
Klappt alles sehr gut.
Wenn man mit der Maus über die Tage fährt, die einen Eintrag besitzen, erscheint ein Popup mit den Infos zum Tag.
Nun folgendes:
Mit den Angaben kann man die Tage des Kalenders selbst rendern (Beeinflussen zum Beispiel vom style):
(...)
style: 'custom',
customDataSourceRenderer: function(element, date, events) {
(...)
Das klappt soweit auch. Ich habe meine Termine für den kalender "klassifiziert" mit einen "typ" (wichtig/unwichtig). Also:
(...)
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29),
typ: 'wichtig'
},
(...)
Nun habe ich die Funktion customDataSourceRenderer wie folgt "gebaut":
(...)
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
style: 'custom',
customDataSourceRenderer: function(element, date, events) {
for (var i=0; i<events.length; i++) {
if(events[i].typ == 'wichtig') {
$(element).css('color', 'red');
$(element).text($(element).text() + "_(!)");
}
if(events[i].typ == 'unwichtig') {
$(element).css('background-color', 'green');
}
}
},
(...)
PROBLEM:
Durch die Zeile
$(element).text($(element).text() + "_(!)");
welche lediglich bei allen Tagen die einen "wichtigen" Termin haben, den Text der Zelle ergänzen soll um den Text "_(!)".
Das klappt auch gut und aus dem Text "15" wird auch "15_(!)", jeodoch klappt dann das Popup nicht mehr, welches die Taginfo darstellen soll. Es erscheint auch kein Fehler o.ä..
Wenn ich die Zeile auskommentiere und nur den CSS bei wichtigen Terminen anwende, klappt es. Bei JEDER Textmanipulation geht jedoch das kleine Popup-Info-Fenster "kaputt".
Aber ich benötige zwingend einen anderen Text für den Tag!
Hat jemand eine Idee..??
Hier mein aktueller Beispiel-Code, der 1-zu-1 beim Kopieren lokal bei Euch laufen sollte!…
1000 Dank vorab!
Jupix
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.bootstrap-year-calendar.com/download/v1.1.0/bootstrap-year-calendar.min.css">
<script src="https://www.bootstrap-year-calendar.com/download/v1.1.0/bootstrap-year-calendar.min.js"></script>
</head>
<body>
<div id="calendar" class="calendar"></div>
<script>
function editEvent(event) {
$('#event-modal input[name="event-index"]').val(event ? event.id : '');
$('#event-modal input[name="event-name"]').val(event ? event.name : '');
$('#event-modal input[name="event-location"]').val(event ? event.location : '');
$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
$('#event-modal').modal();
}
function deleteEvent(event) {
var dataSource = $('#calendar').data('calendar').getDataSource();
for(var i in dataSource) {
if(dataSource[i].id == event.id) {
dataSource.splice(i, 1);
break;
}
}
$('#calendar').data('calendar').setDataSource(dataSource);
}
function saveEvent() {
var event = {
id: $('#event-modal input[name="event-index"]').val(),
name: $('#event-modal input[name="event-name"]').val(),
location: $('#event-modal input[name="event-location"]').val(),
startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
}
var dataSource = $('#calendar').data('calendar').getDataSource();
if(event.id) {
for(var i in dataSource) {
if(dataSource[i].id == event.id) {
dataSource[i].name = event.name;
dataSource[i].location = event.location;
dataSource[i].startDate = event.startDate;
dataSource[i].endDate = event.endDate;
}
}
}
else
{
var newId = 0;
for(var i in dataSource) {
if(dataSource[i].id > newId) {
newId = dataSource[i].id;
}
}
newId++;
event.id = newId;
dataSource.push(event);
}
$('#calendar').data('calendar').setDataSource(dataSource);
$('#event-modal').modal('hide');
}
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
style: 'custom',
customDataSourceRenderer: function(element, date, events) {
for (var i=0; i<events.length; i++) {
if(events[i].typ == 'wichtig') {
$(element).css('color', 'red');
$(element).text($(element).text() + "_(!)");
}
if(events[i].typ == 'unwichtig') {
$(element).css('background-color', 'green');
}
}
},
enableContextMenu: true,
enableRangeSelection: true,
contextMenuItems:[
{
text: 'Update',
click: editEvent
},
{
text: 'Delete',
click: deleteEvent
}
],
selectRange: function(e) {
editEvent({ startDate: e.startDate, endDate: e.endDate });
},
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
+ '<div class="event-location">' + e.events[i].location + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29),
typ: 'wichtig'
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19),
typ: 'unwichtig'
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1),
typ: 'wichtig'
}
]
});
$('#save-event').click(function() {
saveEvent();
});
});
</script>
</body>
</html>
akzeptierte Antworten
Zum Verzweifeln: onmouseover klappt nicht mehr!
dedlfix
Matthias Apsel
JürgenB