Giter Club home page Giter Club logo

fullcalendar-workspace's Introduction

FullCalendar

Full-sized drag & drop calendar in JavaScript

Connectors:

Bundle

The FullCalendar Standard Bundle is easier to install than individual plugins, though filesize will be larger. It works well with a CDN.

Installation

Install the FullCalendar core package and any plugins you plan to use:

npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid

Usage

Instantiate a Calendar with plugins and options:

import { Calendar } from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [
    interactionPlugin,
    dayGridPlugin
  ],
  initialView: 'timeGridWeek',
  editable: true,
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()

Development

You must install this repo with PNPM:

pnpm install

Available scripts (via pnpm run <script>):

  • build - build production-ready dist files
  • dev - build & watch development dist files
  • test - test headlessly
  • test:dev - test interactively
  • lint
  • clean

Info about contributing code »

fullcalendar-workspace's People

Contributors

arshaw avatar avindra avatar fabiomontefuscolo avatar martijnwelker avatar pixel9 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fullcalendar-workspace's Issues

Dynamic custom view

Hello !

I'm currently testing fullcalendar-scheduler if it fits our application and I came across an implementation issue, I'm in a situation where we have the user enter 2 dates and want to render the scheduler between those dates.
My current implementation is overwriting the view object in but this doesn't work (gives very strange results most of the time).

What is the recommended way to do this ?

Current implementation:

function goToPeriod(dateObject) {
            if(!checkCalendarExistance())
                return;

            var diff = moment.duration(
                moment(dateObject.end)
                    .diff(
                        moment(dateObject.start)
                    )
            );

            var timelineType;
            if(diff.asDays() < 8) {
                timelineType = 'timelineWeek';
            } else if (diff.asWeeks() < 5) {
                timelineType = 'timelineMonth';
            } else {
                timelineType = 'timelineYear';
            }

            var customView = {
                type: timelineType,
                duration: diff
            };

            calendar.fullCalendar('option', 'views', 'customView', customView);
            handleCalendarEvent('changeView', 'customView');
            handleCalendarEvent('gotoDate', dateObject.start);

        }

Current time line/indicator

Originally reported on Google Code with ID 2564

Hi all,

I am trying to get knowledfe on the new Resource / Timeline View and I'd like to add
a current time line or indicator. I mean, a vertical line.

I know this was an issue for the agendaWeek but I can't get it to work on this new
feature.

Could anybody helping me a little bit?

Best regards

Reported by pereiraschumy on 2015-08-18 11:42:41

Resource columns not resizing correctly

Hi,
I found out that if you use both "resourceColumns" and "resourceGroupField", it is not possible to resize the columns correctly using the column resize handle.

How to reproduce the issue:
1 - Open this sample link: http://jsbin.com/tugebubelu/edit?js,output
2 - Click and drag the separator between "Room" and "Occupancy" to resize the column

The "Occupancy" column disappear.

Kind regards
Stefano

Adding resource when adding event

refering to closed issue #51

I used following code:
select: function(start, end, resource) {alert($.fullCalendar.resource); },

But this gives me "undefined" as alert.

compatibility with DateTimePicker

Originally reported on Google Code with ID 2513

I was trying your Resource / Timeline View , so I used your new fullcalendar.min.js.

The following jsFiddles use the same code, the first one include your fullcalendar.min.js
, but the second one not. When I include your js there is a bug on the display of the
dateTimePicker. 

With your js : http://jsfiddle.net/Baptiste94/b8q5n8az/2/
Without your js : http://jsfiddle.net/Baptiste94/b8q5n8az/3/

Reported by [email protected] on 2015-06-03 08:15:57

selectOverlap does not work

Hi

it seems that the selectOverlap option doesn't work with schreduler.

Try this JS Bin (and use "Run with JS") :
http://jsbin.com/kuhilexozo/edit?js,output

Currently it's possible to select range even if an event already exists and when the selectOverlap is set to false. It doesn't work also with background event

Scheduler TimelineDay View

Hi,
I am planning to purchase Fullcalendar Scheduler (TimelineDay view) for my project. On this behalf, I have been creating / researching this component using docs and google help, found this is little similar to my requirement.

I would like to clarify, whether we have the following functionalities in the licensed version.

  1. Load the resources / events from an array object (instead of json file).
  2. Edit events will update the same eventId (not creating a new eventId).
  3. Search / Filter Resources
  4. Styling:
  • Resource Render - Left and Right Cells Alternate colors
  • Unavailable Time slots - Greyit down and accept no click
  • Refetch Resources and events on Fullcalendar Header Date navigation.

businessHours per-resource

It would be awesome if there was a way to have business hours for each resource in the timeline(Day) view.
In my app, each resource represents a room, and each room has it's own business hours. I would like to make it so that people can't try to schedule for a time for when the room is closed.
I might be able to make a hack that does this, but I would like it to be in a more official manner.

Custom increment/decrement durations for custom view

How would I make the previous and next buttons move only half the amount of time? For example I have a "2 month" view but would like the next button to only move the view forward 1 month.

So if it is currently displaying Jan-Feb I want it to move one month to Feb-March instead of March-April.

This allows the user to be able to easily drag items between months. Right now they will always have a hard time dragging an event from one month to the next

Events do not wrap correctly when start and end time crosses midnight into the next day, when "timezone: 'local'" is specified

Events do not wrap correctly when start and end time crosses midnight into the next day, when "timezone: 'local'" is specified. You can see the event on the day it starts on, but when you move forward to the day it ends on, it either doesn't show up at all, or it shows up at the start of the local timezone offset.

It seems to work fine when "timezone: false" is configured. It only appears to be a problem when "timezone: 'local'" is configured.

Thanks

Ressources height

Hi all,

I don't find how i can specify the ressource min and max height, any idea ?

Ty

Row Grouping

Hi,

Great work with the FullCalendar! I have a little problem that I have been wrestling with - I need to group rows by certain group header like in the examples/demo shown in the http://ui-grid.info/docs/#/tutorial/209_grouping. They don't necessarily need to be expandable/collapsible but simple row grouping would suffice. Would it be possible or completely out of the paradigm/design?

Thanks!

Vertical Resource View

I apologise is this is already possible and documented somewhere, but I can't find it. However, what I'd really like is something basically the same as the Timeline view in the Scheduler add-on (which I'm very happy to pay for, all of your work is excellent), but with the resources as columns and the timeline going vertically down the page. So, exactly the same as the week view, really, but with days/dates in column headings replaced with resource names.

incompatible with momentjs version 2.1.0

Got incompatible issue with earlier version of momentjs 2.1.0
tried to fix, and too complicated logic to know how to fix.

Not sure other versions, but your example are using 2.9.0, that works.

eventDrop old resourceId and new resourceId

Hi,

I'm triying to get the old resourceId from an event in a resource dropped into a new resource, as well as the new resourceId. Is there any way to do it?

For the old resource id I just need to ask for the event.resourceId but how can I know the new resource where the event was dropped?

eventDrop: function (event, delta, revertFunc) { }

Add 'dist' folder to allow installation with Composer-Asset-Plugin

We currently rely on [https://github.com/francoispluchino/composer-asset-plugin](the Composer-Asset-Plugin) to install bower assets using https://getcomposer.org. Unfortunately this tool seems not to be able to 'build' the FullCalendar Scheduler package.

The result is that the FullCalendar asset IS installed properly (a 'dist' folder already exists in the repository with all the required files), but the FullCalendar-Scheduler asset can NOT be installed (no 'dist'). I filed an issue for this, a temporal solution might be to include a 'dist' folder in the tagged repo of FullCalendar-Scheduler?

Might be slightly related to #16

Upgrade to jQuery 2.x in zip distribution

The jquery version included in the jquery.min.js of the fullcalendar-scheduler-1.0.0.zip is 1.11.3:

/*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */

It should probably be v.2.1.4, since 2.1.4 is the jquery version that's included when fullcalendar-scheduler is installed with bower or built from source.

Hiding time ranges on timeline

Is it possible to hide time ranges on the timeline view. For example midnight - 6 am and then 8 pm to midnight is time that events are hardly ever scheduled so it would be nice to have a way to dynamically show/hide these times. Maybe a call back to reload the timeline view with the times showing or without them showing.

bower.json ignores src files

Hi

The current bower.json ignores almost anything not in the dist folder. The dist folder this folder is not there, so while fetching via Bower, the source code files is not downloaded.

expose MAX_CELLS

from @Patatou


Hi there,

When i put slotDuration: '00:05:00', slotWidth:30 and slotLabelInterval: '00:30' :

Option slotDuration and slotWidth is no longer taken in consideration when i'm on timelineWeek view.

I've try to simply modify your example with timelineThreeDays with simply put days:7, and i've same effect.

Any solution ?

Timeline multiple day view

Hi,

When you're in timeline with multiple day view, if slotDuration < 00:10:00 scroll with day name disapear.

Strange...

Adding resource when adding event

I add an event bij dragging a period on the calendar.
Then i get a bootstrap modal with start en end date already filled in. Using this code:
select: function(start, end) {
var start = $.fullCalendar.moment(start).format("YYYY-MM-DD HH:mm:ss");
var end = $.fullCalendar.moment(end).format("YYYY-MM-DD HH:mm:ss");
$('#AddEventModal #start').val(start);
$('#AddEventModal #end').val(end);
$('#AddEventModal').modal('show');
},

Is it not possible use the clicked resource?

Uncaught TypeError: Cannot read property 'clone' of undefined [when rendering background events]

I cannot change the day. Uncaught TypeError: Cannot read property 'clone' of undefined

            var blockedEvent = {
                title: event.title,
                start: event.start,
                end: event.end,
                allDay: false,
                resourceId: linkedRoomId,
                rendering: 'background'
            };

The events render in the background but I get the attached
stacktrace

I could not get the online jsbin demos to work but I created them anyway. I broke out the scheduler.js to more lines in case that helps determine the root cause. The behavior is the same for at least IE 11.0.9600.17914 and Chrome 44.0.2403.155 mhttp://jsbin.com/wucediz/edit?output

Multiple json ressources

Hi all,

I'm trying to add multiple json feed like this :
events: [
{
url :'./json-plage.php'
},
{
url :'./json-ressource.php'
}
]

But, i've HasTime error... only work like this with one events json:
events: {
url :'./json-plage.php'
},

Is it a know bug ?

Ty

Time bar issues

I am having issues with the time bar not being rendered properly in Scheduler v1.0.0. Attached are two screenshots illustrating my issue.

screen shot 2015-09-17 at 09 56 56
screen shot 2015-09-17 at 09 58 54

In the first image, you can see the time bar starting at 00:00, but the scroll bar for the timeline being somewhere about 1/4 into the day. In the second image, you can see the time bar starting at 06:00 and the time bar being in the same spot as the previous image. It seems this happens every second day, because when I go to September 20th, the time bar starts at 00:00 again, but at 06:00 on the 21st.

If I use the scroll bar to scroll in the view, the times are rendered properly and follow along nicely, attached is another image of the timeline for September 18th, only scrolled a little bit to the left. As shown, the times are now rendered properly.
screen shot 2015-09-17 at 10 04 11

I tried rolling back to the beta version of the scheduler I downloaded this summer (switched out both fullcalendar and scheduler files) and the times are rendered properly there with no issues, but there seems to be something off in the 1.0.0 version of Scheduler.

The code used is just basic resource retrieval from an API and everything is rendered using Fullcalendars and Schedulers default renderers. I am reluctant to post the code publicly, however, as it is intended to be used as a commercial product (with a license being purchased as soon as we are ready to roll out of beta), but I can supply you with my code privately if necessary.

Angular JS support

This isn't an issue so much as a question. As you know Adam, I've been using a ui-calendar (personally modified code) version of the full-calendar within an AngularJS application.

I do like your scheduling plugin and can plainly see it's various uses - and of course would like to integrate it as a module within the same angularJS application. The question is this... as an Open Source code base with attached licensing, what is your stance on me pulling the code and converting it for Angular? or for that matter, if i discover, "hey it's golden as it sits without needing to create a service/factory/module from the existing code" and then plugging it in?

Would we be able to have a private dialogue on what that would look like for you? I realise fully that you've put a lot of work, time and effort into this included request item, and although I'm going to do (my usual) modifications to your existing code... well... I like to follow the rule of thumb of "never piss off the guy who created it, cuz one day it may be me" approach to code :)

How to add two days event in scheduler?

Hi,

I have tried add two days event into scheduler but it is not showing this event!
Can you help me please how is it possible?

I did this too!
e.g
start date = 2015-09-10 00:00:00 (today date)
end date = 2015-9-11 23:59:59
it shows the event in 2015-09-10 00:00:00 but when I clicked on left top arrow for next day, event disappeared there!

Any solution?

Add an event with "renderEvent" does not work with FullCalendar Scheduler on timelineDay

Hi everyone !

First, I would like to thank all of you for this amazing plugin !
However, I noticed a small bug on the new version... or maybe I 'm doing wrong :-/

I need to add an event when I select a slot time in a timelineDay view. So, I do this :

  • I add selectable option for this view :
views: {
    timelineDay: {
        selectable: true
    }
}
  • and in the select callback, I create an event and I want to add and display immediately on my fullcalendar. I use ajax to save in my database, and it works, but the event is not displayed, I must do refetchEvents for that the event appears. Here's how I created my event (in the success) :
select: function(start, end, jsEvent, view, resource) {
...
var newevent;
$.ajax({
    url: Routing.generate('...'),
    data: {
        event_id: id,
        event_title: resource.title,
        event_start: start,
        event_end: end,
        event_agent: resource.id
    },
    type: 'POST',
    dataType: 'json',
    success: function(response){
        newevent = 
        {
            id: response.eventid,
            _id: response.eventid,
            title: resource.title,
            start: start,
            _start: start,
            end: end,
            _end: end,
            allDay: false,
            editable: true,
            agent: resource.id,
            constraint: 'businessHours',
            color: resource.eventColor
        };
        $('#calendar').fullCalendar('renderEvent', newevent, true);
        $('#calendar').fullCalendar('addEventSource', newevent);
        $('#calendar').fullCalendar('refetchEvents');
    },
    error: function(e){
        console.log(e.responseText);
    }
});
$('#calendar').fullCalendar('unselect');
return true;
}

I tested renderEvent in agendaWeek and it works, the event is directly displayed (just using renderEvent) ! So I suppose this is a bug of scheduler ?

Thanks in advance ! And sorry for my english, I'm french...
Regards

Separate business hours per resource?

Hi ya folks. I am wondering if anyone has been able to manipulate the rendering of cells to display a business hours type effect on a 'per-resource basis?

I can globally set business hours in fullcalendar which trickles down to the scheduler plugin. However the goal here is to define separate 'availability' for a given resource.

I haven't got any code to show at the moment as I have just started to look into this problem and don't know if it is even possible.

Any advice would be greatfully recieved.

Cheers

eventDrop, access old resource

from @danielsmacdonald, moved from here

The eventDrop callback has these arguments: (event, delta, revertFunc, jsEvent, ui, view). When used with Scheduler, event.resourceId represents the new location of the event. Could we have something to represent the old location (resourceId before the move)?

Maybe replace delta with prevEvent object? Or just add a property to event, something like event.prevResourceId or event.prevLocation.

Currently I'm adding the resourceId to the event in duplicate (one with a different name) so only one gets overridden and I can still read the old one. But this is messy and error prone.

Multiple resources for one event

Today its only possible to assign one resource to an event. We need the possibility to assign multiple resources like:

events: [ { id: '1', resources: ['b','a','c'], start: '2015-06-07T02:00:00', end: '2015-06-07T07:00:00', title: 'event 1' } ]

Resource's children as an object

While doing xml to hash to json conversion in ruby when a resource has just a single child then resulting children parameter becomes child itself and not an array with single element - postprocessing is needed for such situation to enclose single child into the array; would be nice if script would treat non-array children as a single child object
I will try to post a pull request for it

Dynamically refetch resources upon navigation

Hello and congratulations for the good work :)
I have a small problem on resource recovery as for retrieving data, I the period concerned but not for gold resources the January resources are not necessarily the same as that of February ...
So should the start date and end during calls to resource functions.

Is it possible to put this?
If it's good on my side I buy ;) and congratulations !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.