Is there a way to disable the past dates using tui calender? - javascript

I am using tui calender https://ui.toast.com/tui-calendar that i want to disable the past dates please help me how can i disable the past dates thank u?
https://drive.google.com/file/d/1k39ThkMfZrJBadSVSnSH544EzJzedXlw/view
html view
<div class="card mb-5 ">
<div id="calendar" ></div>
</div>
script
var Calendar = tui.Calendar;
var calendar = new Calendar('#calendar', {
defaultView: 'week',
taskView: false,
useCreationPopup: true,
useDetailPopup: true,
allDaySlot: false,
droppable: false,
template: {
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
}
},
week: {!! json_encode(dailyTime()) !!},
month: {!! json_encode(weekEnd()) !!},
});
document.getElementById('my-today-button').addEventListener('click', function() {
calendar.today();
});
document.getElementById('weekView').addEventListener('click', function() {
calendar.changeView('week', true);
});
});
);
calendar.on('beforeUpdateSchedule', function(event) {
var schedule = event.schedule;
var changes = event.changes;
calendar.updateSchedule(schedule.id, schedule.calendarId, changes);
});

Related

fullcalendar V3 how to add JET Context Menu

I am trying to incorporate context menu from https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=menu&demo=contextMenu
using full calender io events and i am unable to understand how to plug in oj component under fullcalender io events.
I am aware that context menus can be accomplised using jquery ui context menu, but i want to know how to use jet code from fullcalendar io events.
Can you please let me know how i can plug in the jet context menu in the below code?
JET
require(['ojs/ojoffcanvas','knockout','ojs/ojbootstrap','ojs/ojarraydataprovider','jquery','ojs/ojknockout',
'fullCalendar','moment','jqueryui','jquerycontextmenu',
'ojs/ojknockout', 'ojs/ojdiagram','ojs/ojformlayout','ojs/ojbutton',
'ojs/ojmenu', 'ojs/ojoption','ojs/ojinputtext','ojs/ojselectcombobox'],
function (ko, Bootstrap,ArrayDataProvider,$) {
function ChartModel() {
var self = this;
self.addressBookData = ko.observableArray([]);
self.columns = ko.observableArray([
{ headerText : 'title', field : 'title'},
{ headerText : 'start', field : 'start'},
{ headerText : 'end', field : 'end'},
{ headerText : 'QuantityOrdered', field : 'QuantityOrdered'},
{ headerText : 'QuantityCompleted', field : 'QuantityCompleted'}
])
this.dataprovider = new ArrayDataProvider(self.addressBookData, { keyAttributes: 'title'});
}
function getE1Data(self,callback) {
var input = {
aliasNaming: true,
findOnEntry: "TRUE",
maxPageSize: "100",
targetName: "XXX",
aliasNaming : true,
targetType: "view",
dataServiceType: "BROWSE",
returnControlIDs: "TABLEX.DOCO|TABLEX.DL01|TABLEX.LITM|TABLEX.STRT|TABLEX.DRQJ|TABLEX.UORG|TABLEX.SOQS|TABLEX.SOCN|TABLEX.SRST"
};
callAISService(input, DATA_SERVICE, function(response) {
if (response.message) {
callback("failed");
} else {
renderData($,self,response.fs_DATABROWSE_V4801C.data.gridData.rowset);
callback("success");
}
});
}
function renderData($,self,data) {
self = this;
this.events = [];
data.forEach(element => {
const obj ={};
const extendedProps ={};
var teststr1 = (element.TABLEX_LITM.value).concat(" - ",(element.TABLEX_DOCO.value));
var teststr2 = (element.TABLEX_DL01.value).concat(" - ",teststr1);
obj.title = teststr2,
obj.start = new Date(element.TABLEX_DRQJ.value),
obj.end= new Date(element.TABLEX_STRT.value),
extendedProps.QuantityOrdered = element.TABLEX_UORG.value,
extendedProps.QuantityCompleted = element.TABLEX_SOQS.value,
extendedProps.QuantityScrapped = element.TABLEX_SOCN.value,
extendedProps.WOStatus = element.TABLEX_SRST.value,
obj.extendedProps = extendedProps,
events.push(obj);
});
this.calendar = $ ('#calendar').fullCalendar(
{
editable: true,
weekends : true,
selectable: true,
selectHelper:true,
timeFormat: 'H(:mm)',
displayEventTime: false,
header:{
left : 'prev,next,today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
events: events,
eventClick: function(self,events) {
console.log(events.extendedProps.QuantityOrdered);
console.log(events.extendedProps.QuantityCompleted);
},
eventRender: function (events, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
$("#startTime").html(formatDate(events.start));
$("#endTime").html(formatDate(events.end));
$("#QuantityOrdered").html(events.extendedProps.QuantityOrdered);
$("#QuantityCompleted").html(events.extendedProps.QuantityCompleted);
$("#QuantityScrapped").html(events.extendedProps.QuantityScrapped);
$("#WOStatus").html(events.extendedProps.WOStatus);
$("#eventContent").dialog({ modal: true, resizable: true ,effect: "explode",title: events.title, width:350});
});
}
});
}
$(document).ready(function() {
var chartModel = new ChartModel();
getE1Data(chartModel,(status)=>{
ko.applyBindings(chartModel, document.getElementById('calendar'));
});
});
});
JET
HTML
<body
<br />
<div class = "container">
<div id = "calendar"> </div>
</div>
</body>
HTML
Please find the below sample HTML, which used JET libraries like oj-menu using which context menu is acheived:
<body id="content">
<oj-input-text id="filter" class="oj-form-control-max-width-md" label-hint="Filter" label-edge="inside"
placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged]]" value="{{filter}}" clear-icon="always">
</oj-input-text>
<oj-input-text id="filter1" class="oj-form-control-max-width-md" label-hint="Filter1" label-edge="inside"
placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged1]]" value="{{filter1}}" clear-icon="always">
</oj-input-text>
<oj-input-text id="filter2" class="oj-form-control-max-width-md" label-hint="Filter1" label-edge="inside"
placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged2]]" value="{{filter2}}" clear-icon="always">
</oj-input-text>
<oj-table id='table' aria-label='Departments Table'
data='[[dataprovider]]'
scroll-policy='loadMoreOnScroll'
columns-default.sortable='disabled'
columns='{{columns}}'
style='width:100%; height: 1000px;'>
<oj-menu id="ctxMenu" slot="contextMenu" aria-label="Match Edit">
<oj-option value="Action 1">Work Centre Details</oj-option>
<oj-option value="Action 12">Resource Units</oj-option>
<oj-option value="Action 13">Work Day Calendar</oj-option>
</oj-menu>
<div id="eventContent" title="Event Details">
<div id="eventInfo"></div>
</div>
</oj-table>
</body>

Using php array in fullCalendar

I used the latest javascript fullCalendar (https://fullcalendar.io/) on a wordpress webpage to be able to display appointments of a wordress my users. So far the Callendar shows up on the page. Now I want to get the appointments from the db and display them in the Calendar.
If I create an array in php, with the appointments to display as a string, the appoinment shows up in the calendar.
Example:
$events = $wpdb->get_results("SELECT * FROM wp_projekt_calendar WHERE calendar_author=$uid");
foreach($events AS $event){
$array['title']= 'rtrt';
$array['start']= '2020-08-10 10:00:00';
$array['end'] = '2020-08-10 11:00:00';
}
echo json_encode($array);
But if I use the query results to show the appointment it doesent work (query works well!):
foreach($events AS $event){
$array['title']= $event_array->calendar_title;
$array['start']= $event_array->calendar_startdate .' '.$event_array->calendar_starttime;
$array['end'] = $event_array->calendar_enddate .' '.$event_array->calendar_endtime;;
}
echo json_encode($array);
This is how my calendar looks like:
<script>
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'de';
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = new FullCalendar.Calendar(calendarEl, {
height: '100%',
expandRows: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
locale: initialLocaleCode,
navLinks: true, // can click day/week names to navigate views
editable: true,
selectable: true,
nowIndicator: true,
dayMaxEvents: true, // allow "more" link when too many events
events: {
url: "https://mydomainxy.com/wp-content/themes/gambit-child/events.php?uid='<?php // $anwender_id ?>'",
//url: "https://mydomainxy.com/wp-content/themes/gambit-child/php/get-events.php'",
type: 'POST',
error: function() {
alert('There was an error while fetching events.');
}
}
});
calendar.render();
});
</script>
What am I doing wrong or how can I get this to work?

How to change month view in bootstrap-datepicker when updateViewDate is false?

I have an issue. I have set updateViewDate to false. The problem is that when I try to change date with code like this $('#calendar').datepicker('setDate', '2019-12-20'); month view doesn't change, it still shows current (November) month. If updateViewDate is set to true when it works perfectly fine. How to fix this? Full code:
$('#calendar').datepicker({
language: 'lt',
autoclose: true,
templates: {
leftArrow: ' ',
rightArrow: ' '
},
orientation: 'auto',
updateViewDate: false,
beforeShowDay: function (date) {
if(enabledDates.hasOwnProperty(date.toLocaleDateString('lt-LT'))) {
return {
enabled: true,
classes: ((enabledDates[date.toLocaleDateString('lt-LT')] > 0 ? 'reservation-date' : 'full-reserved-date'))
};
} else {
return false;
}
}
}).on('changeDate', function(e) {
$('.free-times').html('');
lastSelectedDate = e.format();
$.get('/reservation/short-term/get-free-times',
{
selectedDate: lastSelectedDate,
premiseId: premiseId,
userSelectedTimes: Object.keys(userSelectedTimes)
}, function(data) {
$('.free-times').html(data);
$('[data-toggle="tooltip"]').tooltip();
});
}).on('changeMonth', function(e) {
var selectedDate = e.date.toLocaleDateString('lt-LT');
$.get('{{ route('reservation.update-calendar') }}',
{
selectedDate: selectedDate,
premiseId: premiseId,
}, function(data) {
enabledDates = data;
$('#calendar').datepicker('update');
if(lastSelectedDate) {
$('#calendar').datepicker('setDate', lastSelectedDate);
}
});
});
Thanks for help in advance!
P.S Tried $('#calendar').datepicker('_setDate', lastSelectedDate, 'view'); it kind of works, but I want that after this function call changeMonth method would be called (Only if that month is different than current)

two datepicker and both are connected with each other you select date of one and another one automatically selected

I have two datepickers (calendar), both are connected with each other. When I select a date from one, another datepicker date should be automatically selected.
I am trying with javascript but that is not working. I am failing to do this
$(function () {
$('#example1').daterangepicker({
showCalendar: true,
locale: { format: 'DD-MMMM-YYYY' },
autoApply: true,
});
$(function () {
$('#example2').daterangepicker({
showCalendar: true,
locale: { format: 'DD-MMMM-YYYY' },
autoApply: true,
});
the date will be shown one selected from anyone
HTML:
<input id="from"> <input id="to">
JS:
<script>
$('#to').datepicker({
defaultDate: new Date(),
minDate: new Date(),
onSelect: function(dateStr)
{
$("#to").datepicker( "hide" );
$('#from').val(dateStr);
$('#from').focus();
$('#from').datepicker( "show" );
$("#from").datepicker( "option", "minDate", finalDate );
}
});
$("#from").datepicker({
defaultDate: new Date(),
minDate: new Date(),
onSelect: function(dateStr)
{
$("#from").datepicker( "hide" );
$('#to').val(dateStr);
$('#to').focus();
$('#to').datepicker( "show" );
$("#to").datepicker( "option", "minDate", finalDate );
}
});
</script>
See the below jsfiddle:
Datepicker
Checkout this way.
$('#example1').change(function(){
var value = $(this).val();
$('#example2').val(value);
});
If you want this to work for any one add the following as well
$('#example2').change(function(){
var value = $(this).val();
$('#example1').val(value);
});

fullcalendar error while sending/taking JSON data

I am trying to make a one page CRUD application using FullCalendar. Actually, I did. I'm just getting errors when I create events and then delete them. When my application is clicked on an existing event, it has to be deleted. But I get the error shown below.
Error
and it is my event object.
Event object
Would you help me figure out what the problem is?
The javascript code is like below:
var teacher_id = 2;
function addEventToDB(teacher_name,teacher_id,title,start,end,color){
axios.post('events', {
teacher_name: teacher_name,
user_id: teacher_id,
title: title,
start: start,
end: end,
color: color
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
function deleteEventFromDB (event_id,teacher_name) {
axios.delete('/events/'+ event_id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
var eventType = 'Individual';
var eventTitle = 'Available for Individual';
var eventColor = 'orange';
$(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
themeSystem: 'bootstrap4',
defaultView: 'agendaWeek',
allDaySlot: false,
slotEventOverlap: false,
slotDuration: '00:30:00',
slotLabelInterval: "01:00",
scrollTime: '08:00:00',
events: 'events',
//defaultTimedEventDuration: '00:30:00',
footer: {
center: 'eventTypeButton'
},
customButtons: {
eventTypeButton: {
text: 'Event type Toggle Button (Group/Individual)',
click: function() {
if(eventType=='Individual') {
eventType = 'Group';
eventTitle = 'Available for Group';
eventColor = 'blue';
} else {
eventType = 'Individiual';
eventTitle = 'Available for Individual';
eventColor = 'orange';
}
}
}
},
dayClick: function (date, jsEvent, view) {
end = date.clone();
end = end.add(30,'minutes');
$('#calendar').fullCalendar('renderEvent', {
title: eventTitle,
teacher : teacher_id,
teacher_name: teacher_name,
start: date.format(),
end: end.format(),
allDay: false,
color: eventColor
});
var title = eventTitle;
var start = date.format();
var end = end.format();
var color = eventColor;
var teacher_name = "{{ Auth::user()->name }}";
addEventToDB(teacher_name,teacher_id,title, start, end, color);
},
eventClick: function(event, jsEvent, view) {
$('#calendar').fullCalendar( 'rerenderEvents' );
console.log(event.id);
deleteEventFromDB(event.id,event.teacher_name);
$('#calendar').fullCalendar('removeEvents',event.id);
$('#calendar').fullCalendar( 'rerenderEvents' );
},
})
});
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">My calendar</div>
<div class="card-body">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
I am adding server code (I am using Laravel 5.6):
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\AvailableTime;
use Illuminate\Contracts\Auth\Authenticatable;
class AvailableTimeController extends Controller
{
public function index(Authenticatable $user)
{
if($user->hasRole('admin') || $user->hasRole('superadmin')){
return AvailableTime::all();
} else if( $user->hasRole('teacher')) {
return AvailableTime::where('user_id',$user->id)->get();
}
}
public function show($id)
{
return AvailableTime::findOrFail($id);
}
public function update(Request $request, $id)
{
$AvailableTime = AvailableTime::findOrFail($id);
$AvailableTime->update($request->all());
return $AvailableTime;
}
public function store(Request $request)
{
$AvailableTime = AvailableTime::create($request->all());
return $AvailableTime;
}
public function destroy($id)
{
try {
$availableTime = AvailableTime::find($id);
$availableTime->delete();
return 'Deleted Successfully';
}
catch ( \Exception $e) {
return redirect()->route('show_calendar')->withErrors
'JSONError' => "Event can not be deleted"
]);
}
}
}
The problem is because your process for adding events is flawed - you're adding an event to the calendar without waiting for the server to send you a valid ID for it. So that event can never be deleted or updated in the server by clicking on it in the calendar. It has no relationship to the event recorded in the database.
You have to send the event data to the server first, get back the auto-generated ID in the response, and then record that as part of the event object you pass into the fullCalendar "renderEvent". If you don't do that, then if you try to update or delete that event, it has no ID which the server would recognise.
Thank you for your advice and I could develop a solution. In fact, the problem is a synchronization problem, and every time I click to create a new event and I click to delete it, all events are refetched and the problem is solved. I share the codes for solving below.
function addEventToDB(teacher_name,teacher_id,title,start,end,color){
axios.post('events', {
teacher_name: teacher_name,
user_id: teacher_id,
title: title,
start: start,
end: end,
color: color
})
.then(function (response) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(response);
})
.catch(function (error) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(error);
});
}
function deleteEventFromDB (event_id,teacher_name) {
axios.delete('/events/'+ event_id)
.then(function (response) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(response);
})
.catch(function (error) {
$('#calendar').fullCalendar( 'refetchEvents' );
console.log(error);
});
}
var eventType = 'Individual';
var eventTitle = 'Available for Individual';
var eventColor = 'orange';
$(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
themeSystem: 'bootstrap4',
defaultView: 'agendaWeek',
allDaySlot: false,
slotEventOverlap: false,
slotDuration: '00:30:00',
slotLabelInterval: "01:00",
scrollTime: '08:00:00',
events: 'events',
//defaultTimedEventDuration: '00:30:00',
footer: {
center: 'eventTypeButton'
},
customButtons: {
eventTypeButton: {
text: 'Event type Toggle Button (Group/Individual)',
click: function() {
if(eventType=='Individual') {
eventType = 'Group';
eventTitle = 'Available for Group';
eventColor = 'blue';
} else {
eventType = 'Individiual';
eventTitle = 'Available for Individual';
eventColor = 'orange';
}
}
}
},
dayClick: function (date, jsEvent, view) {
var end = date.clone();
end = end.add(30,'minutes');
var title = eventTitle;
var start = date.format();
var endformat = end.format();
console.log(endformat);
var color = eventColor;
var teacher_name = "{{ Auth::user()->name }}";
addEventToDB(teacher_name,teacher_id,title, start, endformat, color);
$('#calendar').fullCalendar('renderEvent', {
title: eventTitle,
teacher : teacher_id,
teacher_name: teacher_name,
start: date.format(),
end: end.format(),
allDay: false,
color: eventColor
});
},
eventClick: function(event, jsEvent, view) {
$('#calendar').fullCalendar( 'rerenderEvents' );
console.log(event.id);
deleteEventFromDB(event.id,event.teacher_name);
$('#calendar').fullCalendar('removeEvents',event.id);
$('#calendar').fullCalendar( 'rerenderEvents' );
},
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Thank you again for anyone who is response
event object in eventClick() doesn't have id property, Change id as _id
eventClick: function(event, jsEvent, view) {
$('#calendar').fullCalendar( 'rerenderEvents' );
deleteEventFromDB(event._id,event.teacher_name);
$('#calendar').fullCalendar('removeEvents',event._id);
$('#calendar').fullCalendar( 'rerenderEvents' );
},

Categories

Resources