twinssbc / angularjs-responsivecalendar Goto Github PK
View Code? Open in Web Editor NEWA pure AngularJS responsive calendar directive
Home Page: http://twinssbc.github.io/AngularJS-ResponsiveCalendar/demo/
License: MIT License
A pure AngularJS responsive calendar directive
Home Page: http://twinssbc.github.io/AngularJS-ResponsiveCalendar/demo/
License: MIT License
What is the best way to achieve that?
9:00 - 12:00 range 1
12:00 - 15:00 range 2
15:00 - 18:00 range 3
something like this...
Thankyou.
My Idea is to add Dynamic content (partial HTML file) whenever i perform click action on particular Date.Its like a Google Calendar create event or task Quick popup.How Do I achieve this .Any help appreciated
month.html
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-show="showWeeks" class="calendar-week-column ">
<small><em>{{ weekNumbers[$index] }}</em></small>
</td>
<td ng-repeat="dt in row track by dt.date" class="monthview-dateCell" ng-click="select(dt.date)">
<div ng-class="{'text-muted':dt.secondary}" ng-click="empty()">
{{dt.label}}
</div>
<div ng-if="!dt.events" ng-click="emptySelected()" > </div>
<div class="eventin" ng-repeat="event in dt.events | filter:search| limitTo:3" ng-if="dt.events" ng-class="{'text-center':true, 'monthview-current': dt.current&&!dt.selected&&!dt.hasEvent,'monthview-secondary-with-event': dt.secondary&&dt.hasEvent, 'monthview-primary-with-event':!dt.secondary&&dt.hasEvent&&!dt.selected, 'monthview-selected': dt.selected}" >
<div ng-click="eventSelected({event:dt.events})">
<div ng-if="dt.hasEvent" class="monthview-eventdetail-timecolumn">
{{event.title}}
</div>
</div>
</div>
<div class="dynamicHtmlClass">
</div>
</td>
</tr>
</tbody>
In Calendar.js
I tried in following ways
Not worked.
scope.select = function (selectedDate) {
scope.partialHtml = '<div><button >Event</button><button >Task</button><button >Followup</button></div>';
element.find('.dynamicHtmlClass').html(scope.partialHtml);
}
Applied to All 'td'
scope.select = function (selectedDate) {
scope.partialHtml = '<div><button >Event</button><button >Task</button>
<button >Followup</button></div>';
element.find('td').html(scope.partialHtml);
}
I believe it will be good to namespace CalendarController. It caused a conflict with another controller in my app named as CalendarController. While I should have namespaced it as well, I guess it would be good to do this in this code as a best practice.
Thank you for this great library!
Hi,
I am currently using this module to create my own calendar variant. While doing that I discovered a little bug. The times in the weekview are not showing right. Somehow it keep incrementing the time.getHours(). And sinds I am using that I had to fix it.
This is what I did:
old code (line 528 calendar.js):
function createDateObjects(startTime) {
var times = [],
row,
time = new Date(startTime.getTime());
for (var hour = 0; hour < 24; hour++) {
row = [];
for (var day = 0; day < 7; day++) {
time.setHours(time.getHours() + hour);
time.setDate(time.getDate() + day);
row.push({
time: new Date(time.getTime())
});
console.log(day, time.getDate());
}
times.push(row);
}
return times;
}
New code:
function createDateObjects(startTime) {
var times = [],
row,
time = new Date(startTime.getTime());
var timeHours = time.getHours();
var timeDay = time.getDate();
for (var hour = 0; hour < 24; hour++) {
row = [];
for (var day = 0; day < 7; day++) {
time.setHours(timeHours + hour);
time.setDate(timeDay + day);
row.push({
time: new Date(time.getTime())
});
console.log(day, time.getDate());
}
times.push(row);
}
return times;
}
I hope this helps!
Hello,
Is there anyway to limit the calendar to only show 60 days in the future from the current date?
Is it possible to pass an object to the controller by clicking on an empty cell in the weekview, containing the start and end-hour + date?
I was added a "ui.responsiveCalendar" in my App.My App not loaded.
I Could not find "ui.responsiveCalendar" in calendar.js
How to resolve this
How i set the options.
I'm trying: $scope.calendar = {showEventDetail:true};
but don´t work.
Current if the events in the eventSource is not sorted, events on the same day are not displayed in chronological orders within the event details views.
We need to add sorting to the array after this code segment (https://github.com/twinssbc/AngularJS-ResponsiveCalendar/blob/master/src/rcalendar/calendar.js#L422-L429)
rows[rowIndex][dayIndex].hasEvent = true;
eventSet = rows[rowIndex][dayIndex].events;
if (eventSet) {
eventSet.push(event);
} else {
eventSet = [];
eventSet.push(event);
rows[rowIndex][dayIndex].events = eventSet;
}
Code to add
rows[rowIndex][dayIndex].events.sort(
function(event1, event2) {
return (event1.startTime.getTime() - event2.startTime.getTime());
}
);
Hi @twinssbc ,
Thanks for the directive, it's really helpful.
I need to create a callback when the next / prev button is clicked. Something similar with this: #40.
As suggested there, I tried using the "range-changed" attribute, but I'm still unable to get my callback function triggered.
My HTML:
<calendar
calendar-mode="month"
range-changed="rangeChanged(startTime, endTime)"
></calendar>
My Javascript:
$scope.rangeChanged = function (startTime, endTime) {
console.log(startTime, endTime); // should print something, but empty
}
Any help would be appreciated. Thanks.
Is it possible to switch to day view from month view by clicking on a day with events ?.On click of a date in month view I need to switch to day view and show its events there.I am new to angular ,and unable to figure out how to do it.
Pretty cool, it's in a need of localization though.
I will be glad to help btw.
Hi,
Thanks for making this super easy to use library.
Could you please make it bower installable?
Thanks,
Edmond
Is it possible to display the events directly on the calendar instead of I need to hover it or click the circle icon to view the events? I need it badly but cannot figure out how to do it.
I've been given a requirement not to have the day (in month view) highlight blue if there is only one event on a day and that event contains "Unavailable" in the title. Is this something that would easily be done? I can't figure out in your code, how I should do it.
Here is my HTML:
<calendar ng-model="currentDate" calendar-mode="calendarMode" event-source="bookingSource" query-mode="remote" range-changed="rangeChanged(startTime, endTime)" event-selected="onEventSelected(event, $event)"></calendar>
and here is what I have in my controller:
$scope.rangeChanged = function (startTime, endTime) { Events.query({ startTime: startTime, endTime: endTime }, function (events) { console.log("THIS IS A TEST"); $scope.eventSource = events; }); };
When I run my code, the "THIS IS A TEST" log message does not appear, which tells me the rangeChanged function is not fired. Am I doing something wrong?
In the code https://github.com/twinssbc/AngularJS-ResponsiveCalendar/blob/master/src/rcalendar/calendar.js#L196-L201:
angular.forEach(cells[index].events, function (e) {
if (!e.overlapNumber) {
e.overlapNumber = overlapNumber;
eventQueue.push(e);
}
});
Is it possible to replace the anonymous function in the loop with closure? jshint warns that Don't make functions within a loop.
It seems that with angular.forEach we don't get the looping variable. We might have to use for loop instead to get the looping variable to generate closure.
This is one of the event data
This is All day event that starts at "Sat, Aug 2, 2014 11:59 PM" and ends at "Sat, Aug 2, 2014 12:00 AM"
Current :This event displayed in Aug 1 and Aug 2 cells
Expected :This event should be displayed in Aug 2 cell
{
allDayEvent: "Y"
description: "Desc"
endDate: "Sat, Aug 2, 2014 11:59 PM"
location: "Chennai"
startDate: "Sat, Aug 2, 2014 12:00 AM"
statusName: "Not Started"
subject: "aug 2 Event"
}
Can you provide a license for this project?
How to insert and delete an event into the calendar?
I have an event with a startTime set to Wed May 18 2016 00:00:00 GMT+1000 (AUS Eastern Standard Time) and the endTime set to Wed May 18 2016 23:59:00 GMT+1000 (AUS Eastern Standard Time).
When the calendar loads, the all day event is showing on May 17 and 18. I have tried this with the allday flag set to true and false and I get the same result
If I select March 26 and then go to next month then it automatically selects April 26. Is there anyway to stop this from happening? I do not want to select April 26.
Hello,
I'm wondering if there is anyway to change the the hour-mode in weekview to 24-hours format.
Thanks in advance
I have another block of content, a carousel slider, that I can not get to render if it is placed below where the week.html markup gets rendered. If I move it above where week.html gets rendered, the carousel and calendar week view render fine and don't interfere with each other.
I am getting the following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=GCCICR&p1=Error%3A%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)
I'm a little confused as to how the eventSource array gets displayed.
Using the 'Week' view I can push in my events I have retrieved from an API.
These display correctly, however if I then try to splice the eventSource array or push additional objects into the array, the array is updated but the view isn't. Changing the view to next / prev week causes it to display events correctly.
How can I get the view to refresh with current events in eventSource?
Thanks.
Hi @twinssbc ,
When i was in week view i am little confused what is the current date(user perspective) .
How to do it.I Do see in month view as we highlighted current date.
Hi,
I need to create two calendars, showing current month & current month + 1 (for example, september and october 2015).
These calendar would be linked together; if I click the "Next" button on one calendar, the other one will also advance to the next month, like:
Calendar 1: September 2016
Calendar 2: October 2016
I click "Next" on calendar 1, then they'll be:
Calendar 1: October 2016
Calendar 2: November 2016
What is the best way to do this?
Thanks.
Awesome job on this. I'm new the Angular but I believe I've poked around enough to get the ajax request working that'll retrieve events from a mysql database via php script and return the events in json format. I'd appreciate any help.
Is it possible to click on a date in monthview and have it navigate to the weekview of that day? Or the dayview for that date?
I did see this issue #48
but I always get
Fatal error: Unable to find local grunt.
I downloaded it with git clone and not bower so all files are present (even gruntfile.js)
I've never used grunt before, and I'm kind of stuck.
This is my event source
$scope.eventSource = [
{
title: 'All Day - 1',
startTime: new Date(2016,2,1),
endTime: new Date(2016,2,2),
allDay: true
},
{
title: 'All Day - 2' ,
startTime: new Date(2016,2,1),
endTime: new Date(2016,2,2),
allDay: true
},
{
title: 'All Day - 3' ,
startTime: new Date(2016,2,2),
endTime: new Date(2016,2,2),
allDay: true
}];
The events are displayed one day prior when it comes to calendar, do we need to specify time zone also?
Are their particular components of Bootstrap CSS that are used in this? If I can make a custom build of the Bootstrap CSS file I would like to. I'm having issues with full Bootstrap CSS overwriting styles in my application's CSS.
Is it possible to change the starting day in 'Week' view from Sunday to Monday?
Thanks.
Hai @twinssbc
I update $scope.eventSource when I click on Next / Previous button.
$scope.eventSource has been updated too but the events are not displaying in the calendar.
Please suggest.
Best
nishadotcom
Deleted - Found solution
I'd like to add a datepicker and be able to go to a specified date. Any idea how I can implement this?
Thanks.
Do you think this could be portable for use with angular material framework ?
I create an delete event function, all is ok and the event is delete from backend but the calendar didn't refresh. to see the change i must refresh the page....how can i archieve this without refreshing page...
Merci
Thanks for putting this together; it gave me a great starting point on a small angular app I am working on.
Just some suggested features (a.k.a things I am working through now)
If I move forward with your solution, I will be sure to send a pull request with my anything I add.
Cheers!
hello i try to integrate this with an ionic app , the calendar shows well but the event not showing , here is my code :
Controller :
app.controller('testCtrl', function($scope, $stateParams,ReservationService,$ionicContentBanner) {
$scope.events = [];//createRandomEvents();
// Rest api Call
ReservationService.getById(33,setbookings);
function setbookings(data){
$scope.groups = data.data;
_.each($scope.groups, function(group) {
add_event(group);
})
console.log('bookings '+JSON.stringify(_.groupBy($scope.groups, "bookdate")));
}
function add_event(group){
$scope.events.push({
title: group.pick_point +'<i class="icon ion-ios-arrow-thin-right" style="font-size:16px;vertical-align: middle;">'+ group.drop_point,
startTime: new Date(group.pick_datetime),
endTime: '',
allDay: false
});
}});
the view :
ion-content ng-controller="testCtrl" ng-init="loadEvents()">
calendar calendar-mode="month" event-source="events" >
/ion-content>
any help please
Hai @twinssbc
I like to call a method on Previous and Next icon click.
E.g:
I have a controller in body tag. Name is my_controller.
I have declared a method here.
I like to call the method while click on the Next or previous icon.
Please suggest.
Best
nishadotcom
Hi @twinssbc
I Want add custom implementation to the existing calendar,there week and day views were hourly based.I want change it to half an hour based like a google calendar.
How do I achieve, Could you please give a clue?
I have created an event in the previous month, current month and next month. When I load the calendar, in the current month view, I can see one dark blue day and 2 light blue days (for the events in the previous an next month). When I go to the previous or next month the all day event is not displayed (the day is not dark blue, it remains white). And when I click on the day it displays "No Events" You can see this event in week and day views.
In your calendar's month view, I would like have graphs (directive) for each day cell. How could I go about this? Thanks in advance.
I was using the calendar directive like below
<uib-tabset>
<uib-tab heading="availability">
<calendar ng-model="currentDate" calendar-mode="mode" event-source="eventSource"
event-selected="onEventSelected(event)"
time-selected="onTimeSelected(selectedTime)"></calendar>
</uib-tab>
</uib-tabset>
the event-selected and time-selected functions were not firing. In a stand alone it was firing.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.