I'm developing an app for my school, like a scheduler but for timtable for teachers. I want something like this:
I'm using React for my app and FullCalendar component. I have this component configured like this:
<FullCalendar
weekends={false}
editable
droppable
selectable
events={events}
ref={calendarRef}
rerenderDelay={10}
initialDate={date}
initialView={view}
dayMaxEventRows={30}
eventDisplay="block"
headerToolbar={false}
allDayMaintainDuration
eventResizableFromStart
select={handleSelectRange}
eventDrop={handleDropEvent}
eventClick={handleSelectEvent}
eventResize={handleResizeEvent}
height={isDesktop ? 720 : 'auto'}
plugins={[listPlugin, dayGridPlugin, timelinePlugin, timeGridPlugin, interactionPlugin]}
slotMinTime="8:00:00"
slotMaxTime="19:00:00"
displayEventTime={false}
/>
But I don't know if I can remove hours first columns and make every event as a separated component with an arrow for expand. I need to write on every event some text (sometimes is a long text), and every week have its own text. All data saved to mongo database, ofcourse.
For now my component looks like this:
You know if there are any method or propierty for make events stacked without time duration, and fit to content title and then expand it?
I'm not fixed on FullCalendar Component, I can use some other component if it do what I need, but I need to save every week separated.
Thanks in advance.
For this you can use the "DayGrid" view in fullCalendar.
It's mentioned here in the documentation and there's a live demo available there too to show you what it looks like.
With another minor tweak to the eventDisplay setting it starts to look similar to your screenshot.
Something like this:
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridWeek",
eventDisplay: "block",
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridWeek,timeGridWeek"
},
...etc. Demo: https://codepen.io/ADyson82/pen/KKRqaJe
Of course if you wish you can then add your own further customisations to change the appearance of the events using fullCalendar's event render hooks.
P.S. I'm not a React user so my demo uses vanilla JS but you can get exactly the same result via React syntax.
Related
So I'm using FullCalendar v4 library for reservation system, and I need to override DayHeader while using day-mode (timeGridDay or timeGridWeek with duration set to {days: 1}). Basically I have this sketch:
I want to get day-mode system (as I told) with week-based DayHeader (because I use days labels in my JavaScript code for day switching). I want just to display single day in calendar, with preserving header (header that displays 7 days).
I was trying to override header to duration: {days: 7}, copy header using jQuery .html() method, and then change duration to {days: 1} and paste header using .html() on the same div. But changing duration using method from GitHub destroy cells style alignment, so it does not display nicely as you were using duration: {days: 1} on Calendar init.
What can I do? Thanks in advance for solutions.
#EDIT:
I want to mention that the answer how to restyle FullCalendar (set automatically width for DayHeader cells (labels)) after changing durations is also adequate for me and fits into my wished solution - so if you have something in mind, tell me.
So, I resolved my problem by using this code:
if(view.viewSpec.type === 'customDayGrid'){
let views = calendar.getOption('views');
views.customDayGrid.duration.days = 1;
calendar.setOption('views', views);
}
setTimeout(() => {
$(headerSel).html(getHeaderHTML);
calendar.updateSize();
}, 100)
I wish I didn't used setTimeout but I don't know how to resolve it different way - but it works, so I think it closes my issue.
I have a hard time to understand how the full calendar plug in works if you want to add a new event.
Every example i have seen is hard coded events, not from textboxes.
I have a custom list where i can add new courses (making a course catalog), what i want with my calendar is that the events that is in the custom list will be showing in the calendar to, after the right date (from a textbox).
Does anyone know how to connect a custom list to a fullcalendar? So when a new event is added in the custom list, it also will be added into the full calendar!
will be really glad if someone could give me an example.
Doing it with javascript!
var createinfo = SP.ListCreationInformation();
var newtask = list.addItem(createinfo);
newtask.set_item('Kursnamn', $('#TextKursnamn').val());
newtask.set_item('Malgrupp', $('#TextMalgrupp').val());
newtask.set_item('Forkunskapskrav', $('#TextForkunskapskrav').val());
newtask.set_item('Matrielkrav', $('#TextMatriellkrav').val());
newtask.set_item('Omfattning', $('#SelectOmfattning').val());
newtask.set_item('Kursledare', $('#TextKursledare').val());
newtask.set_item('Telefonnr', $('#TextTelefonnummer').val());
newtask.set_item('Email', $('#TextEmail').val());
newtask.set_item('Startdatum', $('#TextStartdatum').val());
newtask.set_item('Slutdatum', $('#TextSlutdatum').val());
newtask.set_item('SistaAnmalninsgdag', $('#TextSistaanmalningsdag').val());
newtask.set_item('Fritext', $('#TextInformation').val());
newtask.update();
clientContext.load(newtask);
clientContext.executeQueryAsync(success_Createlist, onFail);
//And the calendar is just empty right now
$('#calendar').fullCalendar({
});
I'm creating a rally grid for portfolio items using the 2.0 SDK, and including the "PlannedEndDate" field. This is really nice, because it brings up a calender editor if somebody wants to edit the field.
But I want to make the PlannedEndDate smaller than the standard width. But, when I do that, I loose the nice editing feature and other defaults. How do I change the width, but not loose all the other nice defaults?
I'm changing columnCfgs From:
PlandEndDate,
To:
{ dataIndex: 'PlannedEndDate', width: 35, text:'Planned End' }
Do I need to use some fancy xtype or something?
If you add this to your PlannedEndDate column config it should work:
editor: {
xtype: 'rallydatefield',
format: Rally.util.DateTime.getUserExtDateFormat(),
validateOnChange: false
}
We hope to do some refactoring around the way columns are handled in the grid to make things like this easier.
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.
I am building an application where the user browses certain objects by scrolling and zooming. To change the zoom level I have successfully implemented a "dijit.form.HorizontalSlider" object. Every time the user changes the position of the silder, I can catch the "onChange" call and do something with that.
However, the user can also zoom-in by double clicking inside the view zone, at which point the slider should change position automatically to reflect the new zoom level.
My question is the following: what function or method should I call in my javascript to update the position of a dojo silder ?
Here is the code that creates the silder object:
var zoomSlider = new dijit.form.HorizontalSlider({
name: "zoom_slider",
id: "zoom_slider",
value: 0,
minimum: 0,
maximum: 19,
discreteValues: 20,
intermediateChanges: false,
style: "width: 160px;",
onChange: function(value) {
brwsr.view.zoomTo(value);
}
},
"zoom_slider");
navbox_silder.appendChild(zoomSlider.domNode);
First you need to define an id property in your example's config object like id:'zoom_slider1' to get a hold of the widget and then access it like this:
dijit.byId('zoom_slider1').attr('value',whateverthenewvalueis);
See Dijit Basics.
After DanMan's idea of adding an "id" field to the slider creation code, I dug into dojo's javascript files and found the appropriate undocumented internal method. This is it:
dijit.byId("zoom_slider")._setValueAttr(newvalue);