We Keep Coding

I am trying to make a Timesheet web app using fullCalender

When user selects event type and no. of hours from dropdown then it should be added to the calendar. I have updated the event listener still no data is showing. Sorry if it seems a trivial question. i am new to web applications and a bit time strained.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
ok1.addEventListener('click',function() {
let date = moment($('#calendar').fullCalendar('getDate'));
let val = document.getElementById('inputGroupSelect02').value;
let desc=document.getElementById('nobh').toString();
$('#calendar').fullCalendar('renderEvent',
$('#calendar').fullCalendar({events: [{
start: date,
title: val,
description: desc
}]}),true);
},true);

Thanks #ADyson following worked:-
$('#calendar').fullCalendar('renderEvent', { start: date, title: val, description: desc }, true);

Is it possible to overwrite fullcalendar range filter?

I'm implementing a full calendar IO custom view.
I load the events via an API call, the number of events I get back is correct.
But when calling the "callback(events)", fullcalendar implements a "range" filter on the data.
My problem I need to display all the “current day events” and below all future events of the “current day + 10”. But range filter is applied before rendering the "view", so I can only display a limited set of events and not customize it.
Is it possible to overwrite the default range filter and to implement my own?
If so how and where is the class/function located?
Extra details:
Fullcalendar IO version: 3.4.0
Code implementation:
$('#calendar').fullCalendar({
defaultView: 'cvDay2',
header: {
left: '',
center: 'prev title next',
right: 'cvDay2 customAgendaWeek'
},
views: {
customAgendaWeek: {
eventLimit: 100,
duration: {}
},
cvDay2: {
eventLimit: 100
}
},
displayEventTime: false,
titleFormat: 'D MMMM YYYY',
defaultDate: moment().startOf('isoWeek'),
slotEventOverlap: false,
firstDay: 1,
disableDragging: true,
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: 100, // allow "more" link when too many events
weekNumberCalculation: 'ISO',
events: function (start, end, timezone, callback) {
app.CalendarService.getStoreSpecificCalendar(calendarServiceOptions)
.done(function (events) {
console.log(events); //array of 13 events is returned
callback(events);
}).fail(function () {
window.location.href = errorPageUrl;
}).always(function () {
});
}});

How to change the fistDay in calendar full API but only for weekly, not monthly, etc

I am using https://fullcalendar.io/ API to create a custom view for Weekly events and monthly events. The issue I am facing is that for weekly view, I want the start of the week to be Monday (1) and monthly to remain Sunday (0).
If I were to add firstDay: 1 as seen below, it will apply to both customWeek and customMonth views. I only need it for customWeek.
header: {
left: '',
center: '',
right: 'customWeek, customMonth'
},
firstDay: 1,
droppable: true,....
Complete code.
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: 'customWeek, customMonth'
},
droppable: true,
eventStartEditable: true,
eventLimit: true,
eventLimitText: "MORE",
views: {
customWeek: {
type: 'basicWeek',
buttonText: ' ',
eventLimit: 1,
columnFormat: 'D dddd'
},
customMonth: {
type: 'month',
buttonText: ' ',
eventLimit: 1,
columnFormat: 'dddd',
defaults: {
fixedWeekCount: false
}
}
},
defaultView: 'customWeek',
events: data});
Any ideas or suggestion is appreciated.

As far as I can tell, you can't. It's not one of the options you can pass to a view. The only solution would be to implement a completely custom view which overrides the view class, as detailed here: https://fullcalendar.io/docs/views/Custom_Views .
But that's a lot of work, and I'd argue it's not worth it. I suspect this feature is actually by design - starting on a different day on each view sounds like a great way to confuse your users, who will expect and/or assume that the display is consistent.

Add event to every day if the day is empty

To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});

You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});

How to display current date using full calendar

I am new to jquery.
I am using full calendar for showing events for a month.
However I am unable to display current date above the calendar as shown in various example.
Below is my code:
$(document).ready(function () {
$('#calendar').fullCalendar({
defaultView: 'month',
editable: false,
eventSources: [
{
url: '/Admin/AjaxRequest/CalendarDate/',
type: 'POST',
data: {
start: '0',
end: '0',
id:id
},
},
]
});
});

Titleformat and Header documentations have all the answers you need.
Set a header where you specify where you want your title and then specify in titleformat how you want this title to be displayed.
Answering this even though #Xaerxess point in the comment is valid..