I have search the net and found nothing. Maybe someone here might have used something that google can't give me.
I wanted to use a week calendar. I am using this and have many difficulty in it. One is when my date and time are the same, they overlap in one another and only the one at the top can be clicked. I have tried to hack the codes but it feels like forever.
Any jQuery week calendar you can suggest?
Look at this list of jQuery-based calendars. I had good experience with Datepicker which is highly customizable. Many of these can be customized to "week-view"
$('#calendar').weekCalendar({
timeslotsPerHour: 6,
// START SPLIT COLUMN
allowCalEventOverlap: true, // Enable conflicting events
overlapEventsSeparate: true, // Separate conflicting events
// END SPLIT COLUMN
daysToShow: 6, // Number of days to show initially
switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 6}, // Selector for number of days to be shown
firstDayOfWeek : 1, // Sets the beginning of the week as Monday
businessHours :{start: 7, end: 23, limitDisplay: true}, // Limits the time shown
data: {
events: eventData
}
});
The section marked as "split column" enables the split column and shows both conflicting events.
Related
I have a challenage, that I don't know how to realize. Becuase of that, I can't provide any code.
I want to track training sets (weights, repeats) related to a timestamp.
[
{
weights: 15,
repeats: 10,
training_date: firebase.Timestamp.fromDate(new Date())
},
{
weights: 15,
repeats: 9,
training_date: firebase.Timestamp.fromDate(new Date())
},
{
weights: 12,
repeats: 10,
training_date: firebase.Timestamp.fromDate(new Date())
},
]
This could be a training of 3 sets. When I train on another day, the timestamp (Y.m.d) changes. With that logic I want to group training sets to training set groups and later query that groups.
As I am coming from MySQL this challenge is tough for me.
I don't know how to realize that logic.
I thought about adding documents with the timestamp (Y.m.d) as id and sub collections. But I don't know how the code will look like to create an document or append to the document's collection if the id already exists (React code).
I would strongly recommend not using dates as document IDs. It will only cause problems going forward. I would be far better to accept the random ID provided by Firestore, and put the date in a field of the document. This is shown in the documentation. Then you can use that date in a query against the collection to find all trainings on that date.
add() will provide that random ID for you:
firestore.collection("your-collection").add({
weights: 15,
repeats: 10,
training_date: "YYYYMMDD"
})
See that the date is a formatted string, as timestamps represent a point in time to nanosecond precision rather than a date as a whole. Note also the date format puts years first in the format.
You can now find all the trainings on a certain date:
firestore.collection("your-collection").where("training_date", ==, "20200423")
And you can then sort chronologically:
firestore.collection("your-collection").orderBy("training_date")
I've checked you can constrain some events to be dragged in a period, or to avoid to move to other periods, but I'm looking a feature to block creation of events just in the business hours defined.
Is it possible to use the "selectable: true" (to be able to create events with clicking in some time and drag to the end, as Google Calendar), but limit to some time spaces ?
If you have a defined set of time when events will always be restricted to (without variations over time) then you can use a combination of the businessHours and selectConstraint settings to enforce this:
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
startTime: '10:00', // a start time (10am in this example)
endTime: '18:00', // an end time (6pm in this example)
},
selectConstraint: "businessHours"
In the above example, "businessHours" will grey-out all the areas of the calendar outside the times defined (in this case Monday to Thursday from 10am to 6pm each day). Setting "selectConstraint" to "businessHours" means that users cannot select to create new events which fall outside the same time range.
Demo: https://codepen.io/ADyson82/pen/aboqPoo
Using dc.js example (http://dc-js.github.io/dc.js/examples/heat.html) I have managed to bring the layout with a modified dataset. The problem I'm facing here is not knowing how to sort the values.
I have 3 fields in my dataset: Day_Name, Time, Values
I have my day names in the csv as "Sun", "Mon", "Tue", "Wed", etc.. and Time as 00:00, 01:00, 02:00, 03:00 till 23:00..
Which part of the code should I change to sort the values? Kindly suggest or advise me to correct my code.
Here is my code in a fiddle.
I changed my data set by having the day name as 1, 2, 3, 4, 5, 6, 7 for the week days and included a HTML code as a legend to it saying that 1 = Sunday, 2 = Monday and so on...
For now i'm going with this solution.
If i come across on how to sort the week_days, i'll update my answer.
On the heatmap, the keys are one axis (eg. Day_name) and the values are the other (Time)
You can use the Acccessor functions
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
and use ordering if needed
I have been using FLOT for many great things. Recently, i have needed to use it for time based plots. It worked perfect last month, but this month, i noticed that my last tick was smaller than the others. Also, i noticed that the tick label was not there.
Here is a JSFIDDLE of the issue for you to look at.
Due to the large amount of Javascript, i will keep all the code inside the Fiddle; unless the information is requested.
However, me and a friend thought of a simple workaround :
if(% 2 === 0) {
/*
Check if the data can be divided by 2
Repeat this for 3 as well (return the value and
plug it in the tickSize: [val, 'day'];
*/
}
The only drawback i see here if for months that have 31 days.
How would i fix this issue, or what did i do wrong that is causing this effect?
How about always making the chart 31 days wide (which means 30 days between first and last day and 15 ticks each 2 days wide)? You get that by setting the x axis maximum if your month does not have 31 days by itself:
xaxis: {
mode: "time",
timeformat: "%b %d",
tickSize: [2, 'day'],
max: 1398902400000
},
See this updated fiddle.
I'm building an application that records and displays daily events from 5am - 5am.
I'm using Fullcalendar to display these event in a month view. Based on this, I need to display 5am - 5am as belonging to a single day (ex. Monday).
For instance, on Monday I have 3 events:
7am to 11am
1pm to 12:30am (event spans Monday and Tuesday)
1am to 3am (event is effectively on Tuesday; however, I want it to
display on Monday)
Ideally, I'm going to add a parameter, dayStartTime, which is a custom day start time offset maintaining a 24-hour range.
My question is where within the FullCalendar plugin is it that needs to be modified to achieve this result?
try this - http://fullcalendar.io/docs/utilities/Duration/
$('#calendar').fullCalendar({
header: {
center: 'month,agendaFourDay' // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
}
}
});
For duration
"23:59" // hours/minutes
"23:59:59" // hours/minutes/seconds
"1.23:59:59" // days/hours/minutes/seconds
{ days:1, hours:23, minutes:59 } // an object