Hallo Leute,
es wäre schön, einen flexiblen Kalender im Webfront zu haben.
Hier mal ein Linkzu einem Beispiel, der vom Prinzip her meine Vorstellungen am Besten trifft.
Joachim
Hallo Fonzo,
offenbar wird das ical Calendar-Modul nicht mehr aktualisiert/gepflegt, zumindest gab es auf meine diesbezügliche Anfrage keine (positive) Antwort.
So etwas wie in Deinem Link zum FullCalandar sollte dem einem oder anderem Webfront sicherlich gut stehen…
Joachim
genau das was du suchst macht doch das ical Modul!
Hallo Heinzzuhaus,
du hast ja auch den iCal Kalender im Webfront integriert, könntest du mir ein Beispiel geben wo ich den Code Schnipsel der List Ansicht im Skript einfügen muss und wie ich ein anderes Theme auswählen kann?
Gruß
Stefan
Hallo, hier versuch mal meine Kalender.html
die größe musst dir dann noch einstellen ganz unten
ist nur die neuere Version.3.5.1 zu 3.9.0
dann geht das mit den Skins
kannst dir auch auf der Seite https://fullcalendar.io/
einfach den Quelltext von dem Kalender den du willst anzeigen lassen und das als Vorlage nehmen
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' />
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/lumen/bootstrap.min.css">
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale-all.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listWeek',
views: {
listDay: { buttonText: 'Tag' },
listWeek: { buttonText: 'Woche' },
listMonth: { buttonText: 'Monat' }
},
header: {
left: 'title,prev,next today',
center: '',
right: 'listWeek,listDay,listMonth'
},
locale: navigator.language || navigator.userLanguage,
navLinks: true, // can click day/week names to navigate views
timeFormat: 'H:mm', // uppercase H for 24-hour clock
editable: true,
eventLimit: true, // allow "more" link when too many events
eventSources: [
{
url: 'feed.php',
data: {
InstanceID: 12157 // <- ändern!
},
color: 'yellow', // <- frei konfigurierbar
textColor: 'white', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
}, // hier kann auch Schluss sein falls nur ein einziger Feed angezeigt werden soll
{
url: 'feed.php',
data: {
InstanceID: 24898 // <- ändern!
},
color: 'creme', // <- frei konfigurierbar
textColor: 'red', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
}, // hier können noch weitere Feeds angehängt werden
{
url: 'feed.php',
data: {
InstanceID: 16323 // <- ändern!
},
color: 'orange', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
},
{
url: 'feed.php',
data: {
InstanceID: 13927 // <- ändern!
},
color: 'magenta', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
},
{
url: 'feed.php',
data: {
InstanceID: 53704 // <- ändern!
},
color: 'blue', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
}, // hier kann auch Schluss sein falls nur ein einziger Feed angezeigt werden soll
{
url: 'feed.php',
data: {
InstanceID: 46733 // <- ändern!
},
color: 'green', // <- frei konfigurierbar
textColor: 'black', // <- frei konfigurierbar
error: function() {
$('#script-warning').show();
}
}
]
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-size: 13px;
}
#top,
#calendar.fc-unthemed {
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 10px;
font-size: 14px;
color: #000;
}
#top .selector {
display: inline-block;
margin-right: 10px;
}
#top select {
font: inherit; /* mock what Boostrap does, don't compete */
}
.left { float: left }
.right { float: right }
.clear { clear: both }
#calendar {
max-width: 800px;
margin: 10px auto;
padding: 0 20px;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Danke für den Code. Probiere das mal aus.
Muss ich dann diesen ganzen Quelltext nehmen und nur die event sources einfügen?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'>
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='js/theme-chooser.js'></script>
<script>
$(document).ready(function() {
initThemeChooser({
init: function(themeSystem) {
$('#calendar').fullCalendar({
themeSystem: themeSystem,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2018-03-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-03-01'
},
{
title: 'Long Event',
start: '2018-03-07',
end: '2018-03-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-03-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-03-16T16:00:00'
},
{
title: 'Conference',
start: '2018-03-11',
end: '2018-03-13'
},
{
title: 'Meeting',
start: '2018-03-12T10:30:00',
end: '2018-03-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-03-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-03-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2018-03-12T17:30:00'
},
{
title: 'Dinner',
start: '2018-03-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2018-03-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-03-28'
}
]
});
},
change: function(themeSystem) {
$('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
}
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-size: 14px;
}
#top,
#calendar.fc-unthemed {
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
color: #000;
}
#top .selector {
display: inline-block;
margin-right: 10px;
}
#top select {
font: inherit; /* mock what Boostrap does, don't compete */
}
.left { float: left }
.right { float: right }
.clear { clear: both }
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
</head>
<body>
<div id='top'>
<div class='left'>
<div id='theme-system-selector' class='selector'>
Theme System:
<select>
<option value='bootstrap4' selected>Bootstrap 4</option>
<option value='bootstrap3'>Bootstrap 3</option>
<option value='jquery-ui'>jQuery UI</option>
<option value='standard'>unthemed</option>
</select>
</div>
<div data-theme-system="bootstrap3" class='selector' style='display:none'>
Theme Name:
<select>
<option value='' selected>Default</option>
<option value='cosmo'>Cosmo</option>
<option value='cyborg'>Cyborg</option>
<option value='darkly'>Darkly</option>
<option value='flatly'>Flatly</option>
<option value='journal'>Journal</option>
<option value='lumen'>Lumen</option>
<option value='paper'>Paper</option>
<option value='readable'>Readable</option>
<option value='sandstone'>Sandstone</option>
<option value='simplex'>Simplex</option>
<option value='slate'>Slate</option>
<option value='solar'>Solar</option>
<option value='spacelab'>Spacelab</option>
<option value='superhero'>Superhero</option>
<option value='united'>United</option>
<option value='yeti'>Yeti</option>
</select>
</div>
<div data-theme-system="bootstrap4" class='selector' style='display:none'>
Theme Name:
<select>
<option value='' selected>Default</option>
<option value='cerulean'>Cerulean</option>
<option value='cosmo'>Cosmo</option>
<option value='cyborg'>Cyborg</option>
<option value='darkly'>Darkly</option>
<option value='flatly'>Flatly</option>
<option value='journal'>Journal</option>
<option value='litera'>Litera</option>
<option value='lumen'>Lumen</option>
<option value='lux'>Lux</option>
<option value='materia'>Materia</option>
<option value='minty'>Minty</option>
<option value='pulse'>Pulse</option>
<option value='sandstone'>Sandstone</option>
<option value='simplex'>Simplex</option>
<option value='sketchy'>Sketchy</option>
<option value='slate'>Slate</option>
<option value='solar'>Solar</option>
<option value='spacelab'>Spacelab</option>
<option value='superhero'>Superhero</option>
<option value='united'>United</option>
<option value='yeti'>Yeti</option>
</select>
</div>
<div data-theme-system="jquery-ui" class='selector' style='display:none'>
Theme Name:
<select>
<option value='black-tie'>Black Tie</option>
<option value='blitzer'>Blitzer</option>
<option value='cupertino' selected>Cupertino</option>
<option value='dark-hive'>Dark Hive</option>
<option value='dot-luv'>Dot Luv</option>
<option value='eggplant'>Eggplant</option>
<option value='excite-bike'>Excite Bike</option>
<option value='flick'>Flick</option>
<option value='hot-sneaks'>Hot Sneaks</option>
<option value='humanity'>Humanity</option>
<option value='le-frog'>Le Frog</option>
<option value='mint-choc'>Mint Choc</option>
<option value='overcast'>Overcast</option>
<option value='pepper-grinder'>Pepper Grinder</option>
<option value='redmond'>Redmond</option>
<option value='smoothness'>Smoothness</option>
<option value='south-street'>South Street</option>
<option value='start'>Start</option>
<option value='sunny'>Sunny</option>
<option value='swanky-purse'>Swanky Purse</option>
<option value='trontastic'>Trontastic</option>
<option value='ui-darkness'>UI Darkness</option>
<option value='ui-lightness'>UI Lightness</option>
<option value='vader'>Vader</option>
</select>
</div>
<span id='loading' style='display:none'>loading theme...</span>
</div>
<div class='right'>
<span class='credits' data-credit-id='bootstrap-standard' style='display:none'>
<a href='https://getbootstrap.com/docs/3.3/' target='_blank'>Theme by Bootstrap</a>
</span>
<span class='credits' data-credit-id='bootstrap-custom' style='display:none'>
<a href='https://bootswatch.com/' target='_blank'>Theme by Bootswatch</a>
</span>
<span class='credits' data-credit-id='jquery-ui' style='display:none'>
<a href='http://jqueryui.com/themeroller/' target='_blank'>Theme by jQuery UI</a>
</span>
</div>
<div class='clear'></div>
</div>
<div id='calendar'></div>
</body>
</html>
Edit: In deinem Skript geht das Theme ändern auch nicht in Zeile 6. Ist das bei dir auch so wenn du mit dem Mauszeiger über einen Termin fährst das das Feld weiß wird?
Edit: Habe jetzt den passenden Pfad gefunden wie er angegeben werden muss, um das Theme zu ändern.