8
Ich benutze den vollständigen Kalender, der Kalender verwendet die Google Kalender-API, um die Ereignisse einzubringen.Vollkalender mit ganztägigen Ereignissen
Ich habe ein Problem mit den Ereignissen als All Day für ihre Zeitfenster angezeigt, wenn in der agendaWeek und agendaDay angesehen. Dies verhindert, dass der Benutzer seine Ereignisse richtig anzeigt und es fällt ihm schwer zu erkennen, wo seine Verfügbarkeit innerhalb eines Tages oder einer Woche liegt.
Ich habe bestätigt, dass die Ereignisse Zeiten von 8 Uhr morgens bis 10 Uhr morgens haben.
Irgendwelche Ideen? Ich habe eine schwierige Zeit, dieses Problem zu lösen.
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonIcons: {
prev: 'circle-triangle-w',
next: 'circle-triangle-e'
},
<?php if($jsonEvents !='') { ?>
dayClick: function(date, allDay, jsEvent, view) {
allday:false;
var selectDate = "";
var selectTime = "";
if(view.name !="month") {
if(allDay) {
selectDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
}
else {
selectDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
selectTime = $.fullCalendar.formatDate(date, 'hh:mm TT');
}
}
else {
selectDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
}
if(selectDate !="") {
$("#startDate").val(selectDate);
$('#startDate').datepicker('setValue', selectDate);
$("#endDate").val(selectDate);
$('#endDate').datepicker('setValue', selectDate);
}
if(selectTime !="") {
$("#startTime").val(selectTime);
$('#startTime').timepicker({'timeFormat': 'h:i A', 'scrollDefaultNow': true , 'forceRoundTime': true }).on('change', function(ev){
$('#endTime').val(Add30Min($(this).val()));
$('#endTime').timepicker({'timeFormat': 'h:i A', 'scrollDefaultNow': true , 'forceRoundTime': true, 'minTime': selectTime});
});
$("#endTime").val(Add30Min(selectTime));
$('#endTime').timepicker({'timeFormat': 'h:i A', 'scrollDefaultNow': true , 'forceRoundTime': true, 'minTime': selectTime});
}
$("#eventId").val("");
$("#mainModalHead").text("Add Event");
$("#hidEditEventId").val("");
$("#EventModal").modal();
},
eventClick: function(calEvent, jsEvent, view) {
var startDayName = $.fullCalendar.formatDate(calEvent.start, 'ddd');
var startMonthName = $.fullCalendar.formatDate(calEvent.start, 'MMM dd');
var startTime = $.fullCalendar.formatDate(calEvent.start, 'hh:mm TT');
var startDetails = startDayName+", "+startMonthName+", "+startTime;
var endDayName = $.fullCalendar.formatDate(calEvent.end, 'ddd');
var endMonthName = $.fullCalendar.formatDate(calEvent.end, 'MMM dd');
var endTime = $.fullCalendar.formatDate(calEvent.end, 'hh:mm TT');
var endDetails = endDayName+", "+endMonthName+", "+endTime;
var eventDetails = startDetails+" - "+endDetails;
$("#googleEventTitle").text(calEvent.title);
$("#googleEventBody").text(eventDetails);
$("#eventId").val(calEvent.id);
$("#hidEventName").val(calEvent.title);
$("#hidStartDate").val($.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd'));
$("#hidStartTime").val($.fullCalendar.formatDate(calEvent.start, 'hh:mm TT'));
$("#hidEndDate").val($.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd'));
$("#hidEndTime").val($.fullCalendar.formatDate(calEvent.end, 'hh:mm TT'));
$("#eventDelete").attr("disabled", false);
$("#eventEdit").attr("disabled", false);
$("#EditDeleteOperationModal").modal();
},
<?php } ?>
weekNumbers : false,
weekMode : 'fixed',
editable: false,
<?php if($jsonEvents !='') { ?>
events: <?php echo $jsonEvents; ?>,
<?php } ?>
timeFormat: 'hh:mm tt',
eventColor: '#3c8dbc',
eventTextColor: '#ffffff'
});
Hier ist die JSON-Ereignisliste.
$eventItems = $eventList['items']; //From Google
$x=0;
$events = array();
$startDateTime ='';
$endDateTime ='';
$summary = '';
$start = array();
$end = array();
foreach($eventItems as $item) {
if(isset($item['summary'])) {
$summary = $item['summary'];
}
$start = $item['start'];
if(isset($start['dateTime'])) {
$startDateTime = $start['dateTime'];
}
else if(isset($start['date'])) {
$startDateTime = $start['date'];
}
$end = $item['end'];
if(isset($end['dateTime'])) {
$endDateTime = $end['dateTime'];
}
else if(isset($end['date'])) {
$endDateTime = $end['date'];
}
$events[$x]['id'] = $item['id'];
$events[$x]['title'] = $summary;
$events[$x]['start'] = $startDateTime;
$events[$x]['end'] = $endDateTime;
$events[$x]['allDay'] = true;
$events[$x]['backgroundColor'] = '#0092D0';
$x++;
}
$jsonEvents = json_encode($events);
}
$jsonEvents gibt die folgende;
string(3742) "[{
"id":"32rsm3h04dsuoikk2r1arfc3m0_20170624T160000Z","title":"Car payment $330.00 28th","start":"2017-06-24T09:00:00-07:00","end":"2017-06-24T10:00:00-07:00","allDay":true,"backgroundColor":"#0092D0"},
}]"
jsonEvents ist wie
$eventList = $cal->events->listEvents(
'primary',
array(
'timeMin' =>''.$pastEvents.'T01:00:00Z',
'timeMax' =>''.$futureEvents.'T23:59:59Z',
'singleEvents' => true
)
);
$eventItems = $eventList['items']; //From Google
$x=0;
$events = array();
$startDateTime ='';
$endDateTime ='';
$summary = '';
$start = array();
$end = array();
foreach($eventItems as $item) {
if(isset($item['summary'])) {
$summary = $item['summary'];
}
$start = $item['start'];
if(isset($start['dateTime'])) {
$startDateTime = $start['dateTime'];
}
else if(isset($start['date'])) {
$startDateTime = $start['date'];
}
$end = $item['end'];
if(isset($end['dateTime'])) {
$endDateTime = $end['dateTime'];
}
else if(isset($end['date'])) {
$endDateTime = $end['date'];
}
$events[$x]['id'] = $item['id'];
$events[$x]['title'] = $summary;
$events[$x]['start'] = $startDateTime;
$events[$x]['end'] = $endDateTime;
$events[$x]['allDay'] = true;
$events[$x]['backgroundColor'] = '#0092D0';
$x++;
}
$jsonEvents = json_encode($events);
}
Sie sollten den Inhalt von '$ jsonEvents' posten ... Ich denke, es gibt keine 'start'- und' end'-Eigenschaft. Siehe [Dokumentation] (https://fullcalendar.io/docs/event_data/Event_Object/). –
@LouysPatriceBessette Ich habe die jsonEvents hinzugefügt. – Kray
So formatieren Sie die Daten ... Und es sieht korrekt aus. Aber ich wollte den JSON-Inhalt selbst überprüfen. Versuchen Sie 'console.log (" ");' Um zu prüfen, ob es eine Start- und Endzeit gibt. Vielleicht ist es da aber nicht richtig formatiert. Es muss ISO 8601 sein. –