vkurko / calendar Goto Github PK

Hey thanks for the great library.

Im wondering is there anyway to a full day event.
With the all day bar up the top.
Something like this

If it's not possible
Let me know what it would take to have this feature and I can take a look

Thanks

After expanding the event its not possible to reduce it to one day, you can still expand it and short it but only into minimum 2 days

Hello Vladimir
Can I set non-clickable hours for resources? The unclickable time of each resource can be different.

I cannot find the event triggered when the date change (in order to make an api call without using the eventSources option.
The problem I encounter with eventSource is that I dont want my api to send events directly

For calendar entries, to reschedule, any plans?

With narrow days in the month view, the popup with the list of events will also be narrow. It's possible to add a minimum width for it or the ability to manage it.

Hello,
First of all, I have to say that you wrote a great script.
i have a little problem ;
Is there a method where I can edit the headerToolbar design? like a eventContent method.

When trying this great lib, I encounter trouble with locale/internationalization
Some labels does not seems to be translated properly. Is it possible to pass an object containing key and associated translations in order to overwrite the incorrect translations ?

Hello

When I send the following command, the events are filtered, but when I send false, the events do not come back.
ec.setOption('filterResourcesWithEvents', 'true');
ec.setOption('filterResourcesWithEvents', 'false'); --- not working

I am facing issue in even slots, i.e. I have created the event between 13:00 to 14:00 but after saving the event, in calendar slots it get displayed between wrong time slots i.e. 01:00 to 02:00 which is wrong it should be displayed on the slots I have created while creating the event i.e. 13:00 to 14:00,
I have checked I have passed the correct value in start and end parameter.

Below is the code:
2022-08-03 13:00:00 to 2022-08-03 14:00:00

this.Events.forEach(event=> {
let Event = {
id: event.itemId,
start: (event.FromTime),
end: event.ToTime ? (event.ToTime) : '',
resourceId: event.rId,
title: event.title,
color: event.color,
extendedProps: event,
}
EventsPost.push(Event);
});

How can i send date and load with ajax ?

Hello,

i am using eventsources method,
i cant get loaded event list

ec.getOption('events');

this function not wotking when i use eventsources method also there is no alternative

Have you used this library inside of a svelte kit based application? I’m trying it out and not able to render it because of an error stating that Calendar is not SSR compatible.

It's weired that neither eventClick or dateClick callback triggered.

anything wrong?
browser : Chrome
resources:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build/event-calendar-modern.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build/event-calendar-modern.min.js"></script>

      new window.EventCalendar(this.$refs.calendar, {
        view: 'timeGridWeek',
        events: this.createEvents(),
        allDayContent: 'all day.',
        pointer: true,

        dayMaxEvents: true,
        eventClick: function(e) {
          console.log('eventClick', e)
        },
        dateClick(e) {
          console.log('dateClick', e)
        }
      });

Do you have plan to add now indicator like in fullcalendar?

Is it just me or these editable switches don't do anything? I am still able to resize/drag events. Modifies your official demo to test it.. thanks for reply. Same thing for event-relative editable booleans.

    let ec = new EventCalendar(document.getElementById('ec'), {
        view: 'timeGridWeek',
        height: '800px',
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek resourceTimeGridWeek'
        },
        buttonText: function (texts) {
            texts.resourceTimeGridWeek = 'resources';
            return texts;
        },
        resources: [
            {id: 1, title: 'Resource A'},
            {id: 2, title: 'Resource B'}
        ],
        scrollTime: '09:00:00',
        events: createEvents(),
        views: {
            timeGridWeek: {pointer: true},
            resourceTimeGridWeek: {pointer: true}
        },
        dayMaxEvents: true,
        nowIndicator: true,
        editable: false,
    });

when i use refetchEvents method, can i set set extra param

for ex;
ec.refetchEvents(hideCancelledEvent);

also
I tried to write a function in the extraParams part of the eventSources method, it didn't work.

It is possible to add settings dayMaxEvents like https://fullcalendar.io/docs/dayMaxEvents

Does this support angular 13? If someone can share some demo links it would be very helpful.

Thanks in advance :)

Hi Vladimir,
I have a new question.
I'm adding new event calendar but im refreshing after adding event.
I wont reload the page.

My question: How can i add event on calendar ?
I want it to add a new event (or delete event) when I press the button than i will import my project :)
How can i do this?
I'm looking "addEvent( event )" but i didn't it.

The eventDrop callback has an issue in the latest version.

$_viewResources[resourceCol] throws an error because $_viewResources is undefined

Here is a stackblitz example and changing the package version shows it working in v0.10.2
https://stackblitz.com/edit/web-platform-td4v8t?file=index.html

Hello is it possible to change slot height from default 24px to 12px or something?

It is possible to add callback datesSet like https://fullcalendar.io/docs/datesSet

Hey awesome library.
We are currently using your library for our application works great.
One option that would be really helpful is to be able to disable or enable editing an event on a per event basis.

• Our use case is that we want to be able to only enable drag on one particular event.
  

Is it possible to add an extra property to the event object that we can override editable on a per event basis

Something like this spotted on the fullcalendar docs

Thanks

Hi, @vkurko

I need to create my own next and previous buttons for the calendar, however, I could not find any methods exposed for this purpose.
Can you guide me on how to achieve this?

Thank you

Hi @vkurko

First of all, thank you for the nice work you have done.

I want to have a minimum width for each resource and make them scrollable in the daily resource view.
In my project, I have more than 10 resources in the daily view and they may increase than that as well

Is there any way to achieve this in the current configuration set or do I need to do that via custom CSS?

Thank you,

Sometimes, I get some alignment issue in the calendar. You can see in the screen shot that the time slot cell and the header cell are not properly aligned.

Hi,

FYI: I am using your calander for a simple planning of appointments.

Is there a simple solution for you to disable the possiblity to add events in the past?

At the moment i am doing it myselve in the dateClick checking the date and ignoring the event when the incoming date is in the past.
But the draw back is that there are no visual hints that you cannot plan an appointment. (time is shown, dates are of normal color instead of greyed out)

It would be nice if there would be some gray period where you cannot add new events.

1. In the past (make all previous days AND previous hours in current day : Grey and not clickable and not showing time on hover
2. Extra: Add a future period to now allow entry of new events; Essentialy point 1, but then the start is not 'now' but a future point in time, possibly given by numbers for days:hours:minutes

Point 2 is required since there is always some kind of lead time for reacting on the actual event.

default time slot height is too short, i want show full info.

Hi @vkurko, I would like to use the calendar library inside Angular but I couldn't figure it out from the documentation, would you please assist me in this regard.

Thanks

Hi Vladimir,
I have a new problem :)
I'm using bootstrap v4.5.* popover with calendar eventMouseEnter function

My problem this:
When I hover, the popover works, but when I move to the next day, it shows the previous day's data. (same hours)

eventMouseEnter: function(eventInfo){ /* alert(eventInfo.event.extendedProps.nameSurname); */ $(eventInfo.el).popover({ title: eventInfo.event.extendedProps.nameSurname, toggle: 'popover', content: eventInfo.event.extendedProps.categoryName + "<br>" + eventInfo.event.extendedProps.comment, trigger: 'hover', html: true }); },

And edit: My 2. problem;
When i first hover events popover not working but i tried 2. hover popover working
What's the problem ?

https://github.com/vkurko/calendar#editable speaks of resizing events though it's not yet implemented.

Is it possible to add a Delete/Edit event icon, while using below code:-

props: {
        plugins: [TimeGrid],
        options: {
          view: "timeGridWeek",
          height: "700px",
          events: events,
          dateClick: (dateClickInfo) => {},
          eventClick: (eventClickInfo) => {}
        }
     }

Hey, your tool is great but I miss some nice feature of fullcalendar.

Are you planning to propose the select method of fullcalendar ?
This method allows you to create an event when the user select a time slot in a calendar.

Hello, on my calendar, Sunday events are not rendering and I am not sure why or if there is an option that I missed. I know the events exist inside the events property when printing to the console. There are about 2000 events to display in a month, but I reduced the number but it still does not show anything on Sunday. My events are all day events so I set the start/end to be the same date.

Inspecting the source code on a Sunday, there is nothing rendered to events. The other days all have content rendered. Below are my code to render the calendar, and code snippet to generate the array for events data. Thank you.

EDIT: I discovered if I do not put a time for start/end on an event that falls on Sunday, it does not show. But the other days, it does show. (https://jsfiddle.net/b2mj3kxg/2/)

async function renderCalendar() {
	let ec = new EventCalendar(document.getElementById('ec'), {
		view: 'dayGridMonth',
		// allDaySlot: true,
		eventStartEditable: false, // disables dragging
		eventContent: eventInfo => {
			// console.log(eventInfo)
			return `<span style='color: ${eventInfo.event.extendedProps.dataColor}'>${eventInfo.event.extendedProps.dataTask} | ${eventInfo.event.extendedProps.dataName}</span>`
		},
		events: renderEvents()
	})
}

function renderEvents() {
	let events = []
	for (const property in db_main) {
		let d = db_main[property]['date']
		let assignments = db_main[property]['data']
		assignments.forEach(item => {
			events.push({
				start: db_main[property]['date'],
				end: db_main[property]['date'],
				title: 'test',
				allDay: true,
				backgroundColor: item['color'],
				editable: false,
				extendedProps: {
					"dataTask": item['name'],
					"dataName": db_people[item['person']],
					"dataTextColor": item['textColor']
				}
			})
		})
	}
	console.log(events)
	return events
}

Hello, it looks good. Nice work 👍

I have question, its posible to configure resource view to look something like this:

If its possible, how can achive that look ?

How do I disable passive drag and drop?
And how can I select the time interval I want and run a function?

I want to get events from this style:
events: {
url: '', type: 'POST', cache: false,
success: function(data) {
var events = [];
$(data).each(function(e, l) {
$(l.events).each(function(c, d) {
events.push({
id: d.id, start: d.start, end: d.end, title: d.title, className: l.className, textColor: l.textColor
});
});
});
return events;
}
}

But i can't do this
I can get eventSources function but i want to get this style from events
How can i do this.
My error log: Uncaught TypeError: Cannot read property 'call' of undefined

How can i choose date and load items ?

It's not a bug but it will be nice feature that in eventDragStart that will be "el" selector since popover or tooltip can not be disable while dragging event. So after dropping event in new place tooltip/popover element loses parent element and stays open

Would it be possible to add a specific class for resource title
Currently, resource title have a fc-day class which does not seems right and make it very hard to style the resource header title

In 0.10v there is a bug if you using a different view than the 'timeGridWeek' calendar messes up:

'resourceTimeGridDay':

In timeGridWeek view:

If you press on Week button and go back to the other view everything works again as it should

Is it possible to change view for resourceTimeGridWeek to show Day as header instead resource and then split to resource:

How can i get resources with ajax ?
And post date ?

I'm using the ResourceTimeGridWeek view. In that view, the dragging of event does not seems to work properly, even with the editable option and eventStartEditable option set to true

can i replace dayGrid (days on the top of calendar) with users name ?

First off, great job putting this together! I've been looking for a viable alternative to fullcalendar and this is it.

Can you please advise or point to how to handle recurring events? Fullcalendar has rrule-plugin. Do you offer anything similar? I couldn't find it in the docs.

Cheers!

Every time I call the getEvents function it changes the start and end hours. Also is it possible to save dates as strings since it always converts it into a date value. Right now to solve this problem I have to run a function after calling the getEvents so I can reformat the dates into "aaaa/mm/ddT17:30" saving it like this works and displays everything correctly.

A solution I can give is that the addEvent, editEvent also adds/updates the ec.event array and that the getEvents function just looks for ec.event array