I resolved it - it was a css issue
I am trying to integrate https://github.com/mattlewis92/angular-bootstrap-calendar. There are no errors, but instead of rendering the calendar as per the demo page, it just prints out the days etc on the screen.
Here is my html:
div ng-controller="calendarCtrl">
<mwl-calendar
view="calendarView"
current-day="calendarDay"
events="events"
view-title="calendarTitle"
auto-open="true">
</mwl-calendar>
</div>
and here is the controller:
app.controller('calendarCtrl', function($scope, $log, userData){
var invoiceData = userData.getActivityData();
$scope.calendarView = 'month';
$scope.calendarDay = new Date();
$scope.calendarTitle = "BirdsEyeView";
if( invoiceData[0]){
//$log.debug("in cal array:"+$scope.calendarDay);
}
else {
$log.debug("No invoice data");
}
$scope.invoiceData = invoiceData;
$scope.events = [
{
title: 'My event title', // The title of the event
type: 'info', // The type of the event (determines its color). Can be important, warning, info, inverse, success or special
startsAt: new Date(2015,6,10,1), // A javascript date object for when the event starts
endsAt: new Date(2015,6,10,15), // Optional - a javascript date object for when the event ends
editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable. If set to false will also prevent the event from being dragged and dropped.
deletable: false, // If delete-event-html is set and this field is explicitly set to false then dont make it deleteable
incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
recursOn: 'year' // If set the event will recur on the given period. Valid values are year or month
}
];
});
this was a CSS issue - the download from npm did not have the css. So did a manual download.
Related
Using this very cool AngularJS control but having a problem with limiting the maximum number of items that can be selected.
http://dotansimha.github.io/angularjs-dropdown-multiselect/docs.
The documentation is vague at best although there are a lot of properties and features described. But after several hours of trying combinations of settings I almost got it to work as desired.
I want the dropdown button to display a custom label and show the count of the selected items. The problem is I can't seem to find any way to have this functionally and also limit the number of selected items the user can click on.
This said, I have not tried to see if it is possible to capture the click event and force the behavior I desire because the control describes the "smartButtonMaxItems" as a property that is intended to do just this, limit the number of selected items.
The JS
app.controller('AlphabeticController', ['$scope', '$window', function ($scope, $window){
var _this = this; // insure correct scope within callBacks to this controller
this.name = "AlphabeticController";
_this.names = [
{ 'pk': 1, 'userName': 'Priscila Gail Hane' },
{ 'pk': 2, 'userName': 'Milford Frank-Duell' },
{ 'pk': 3, 'userName': 'Wilson Albanese' },
{ 'pk': 4, 'userName': 'Aileen Hudec' }
];
// init the selected names collection
_this.oSelectedNames = [];
// create default alphabetic list of names
this.init = function () {
// sort names with local characgters (accent inorged)
_this.oSortedNames = angular.copy(_this.names);
_this.oSortedNames.sort(function (a, b) {
return a.userName.strength - b.userName.strength || a.userName.localeCompare(b.userName);
});
};
this.projectSettings = {
displayProp: 'userName',
idProp: 'pk',
externalIdProp: '',
styleActive: true,
showCheckAll: true,
showUncheckAll: true,
scrollable: true,
enableSearch: true,
keyboardControls: true,
dynamicTitle: true,
smartButtonMaxItems: 0,
smartButtonTextConverter: function (itemText, originalItem) {
return _this.oSelectedNames.length;
}
};
this.projectText = {
buttonDefaultText: _this.oSelectedNames.length + ' Selected Names',
selectionCount: 0,
selectionOf: 0,
searchPlaceholder: 'enter name',
dynamicButtonTextSuffix: ' Selected Names'
};
}]);
The HTML
<div ng-controller="AlphabeticController as AC" ng-init="AC.init()">
<div ng-dropdown-multiselect=""
options="AC.oSortedNames"
selected-model="AC.oSelectedNames"
translation-texts="AC.projectText"
extra-settings="AC.projectSettings"
search-filter="">
</div>
</div>
With the value of zero (0) set on the "smartButtonMaxItems" property the dropdown button works correctly but there is no upper limit to the number of items that can be selected. Whereas, with the "smartButtonMaxItems" set to a value smaller than the names array the control limits the number of items that can be selected by the button no longer shows the count and rather shows the names them selves.
Demo on Fiddler
To limit the selection i have added selectionLimit: 2 to this.projectSettings .
Also i have customized the selection message in the below fiddler . Hope this helps you
Here's Updated fiddler
I am using the datepicker of UI Bootstrap: (there is a Plunker there that disable the past dayswith a button).
Can anyone please help me to disable the future days without any button?
I tried change the function of the button like that, but it didn't worked:
$scope.toggleMin = function() {
$scope.options.minDate = $scope.options.minDate ? **new Date()** : **null** ;
};
And this is a button, I'd like to disable without a button.
Just set maxDate in options to the date you want to restrict to.
$scope.options = {
customClass: getDayClass,
maxDate: new Date(), // restrict maximum date to today
showWeeks: true
};
Otherwise, if you need to change it after the options are set you can just do:
$scope.options.maxDate = new Date(), // restrict maximum date to today
Here's the updated Plunker with days after today disabled: https://plnkr.co/edit/0iqNNEcATzv4t8h8n41X?p=preview
Set your datepicker class and Set endDate = new Date()
$('.date-datepicker').datepicker({
autoclose: true,
endDate: new Date()
});
In my ExtJS 4.2 Application I have the requirement to show from 1 to 12 months calendar depending on the Holiday calendar from a selected employee.
I need to show something like this:
So from the above approach I think this can be done by using DatePicker components (as many as needed)
I also found this sample of how to show a complete year info:
From the above sample I think the approach would be creating a dynamic grid with custom columns and rows.
Anyone has done something similar so can give me an idea of the best way to achieve this?
Appreciate in advance.
I used Extensible.calendar
Ext.define('App.view.calendar.calendar_v', {
extend: 'Extensible.calendar.CalendarPanel',
requires: ['Ext.panel.*',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.tip.QuickTipManager',
'Ext.form.field.ComboBox',
'Ext.layout.container.Table'],
controllers: ['Main'],
eventStore: eventStore,
xtype: 'calendar',
title: 'Custom Views',
width: 800,
height: 700,
activeItem: 3,
// These show by default, turn them off
showDayView: true,
showMonthView: true,
// Defaults to 3 days. You could also set the dayCount config
// inside multiDayViewCfg to change that.
showMultiDayView: true,
// Used with the custom week view configured below
weekText: 'Week',
weekViewCfg: {
// These settings create a fixed weekday view.
// This view will only show Mon-Fri.
dayCount: 5,
// Always start the view on Monday
startDay: 1,
startDayIsStatic: true,
// NOTE: the configs below apply to any DayView or WeekView. If you wanted all day
// and week views to share these same settings, you could simply pass these configs
// in the general viewCfg. Any views that do not use them will ignore them. They are
// only on this view in this sample to demonstrate how they can be easily customized per view.
// Hide the half-hour marker line
showHourSeparator: false,
// Start the view at 6:00
viewStartHour: 6,
// End the view at 8:00pm / 20:00
viewEndHour: 20,
// Default the scroll position on load to 8:00 if the body is overflowed
scrollStartHour: 8,
// Customize the hour (and event) heights. See the docs for details on setting this.
// This example will be double-height (the default is 42)
hourHeight: 84,
// Allow drag-drop, drag-create and resize of events in 10-minute increments
ddIncrement: 10,
// Since the hour blocks are double-height, we can shorten the minimum event display
// height to match the ddIncrement
minEventDisplayMinutes: 10
}
});
And then I load in events from a store
var x = 1;
var u = Ext.data.StoreManager.lookup('calendar.calendar_s');
u.load({
callback: function () {
Ext.each(Ext.data.StoreManager.lookup('calendar.calendar_s').data.items, function (value) {
eventStore.add({
CalendarId: (x + 1),
EndDate: value.data.date,
IsAllDay: true,
Location: "",
Notes: notes,
RecurRule: "",
Reminder: "",
StartDate: value.data.date,
Title: "",
Url: "sumpnsumpn"
})
});
}
});
I have a problem with AngularUI datepicker when i want to use 2 calendar in range each other.
When i select date in first calendar, the min date of the second calendar need to be higher than first.
So far no problem !
But, when i open the second calendar, the first date is good, but i can't click on date or can't switch month! Nothing do...
Here is my code
HTML :
<div ng-controller="test">
From <input id="from" ng-model="from" ui-date="formatCalendar" ng-change="updateDate()">
To <input id="to" ng-model="to" ui-date="formatCalendar2">
</div>
Javascript :
function test($scope){
$scope.to = null;
$scope.from = null;
$scope.formatCalendar = {
minDate: 0,
maxDate: 365,
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.formatCalendar2 = {
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.updateDate = function(){
$scope.formatCalendar2.minDate = $scope.from;
};
}
You can see demon # http://plnkr.co/edit/4tTHEIUzVRyQJ7NOCIAs?p=preview
Thanks for help :)
By looking at the source of ui-date, it seems that it has a watch on the whole config object. That watch will only fire if your config object is replaced, and not if you only modify a property on it. Something like this might work:
$scope.updateDate = function(){
// Just a simple way to clone the object to trigger
// the watch in ui-date
$scope.formatCalendar2 = JSON.parse(JSON.stringify($scope.formatCalendar2));
$scope.formatCalendar2.minDate = $scope.from;
};
EDIT:
Misread the code, the watch does fire because getOptions() returns a new object every time. I was able to get your code running here: http://jsbin.com/yibehape/2/edit
It sets the min date for the To field when changing the From field. So I'm guessing that there's some logical error in your code that you haven't showed us. You seem to have removed your plunker, did you get it working?
var User = Backbone.Model.extend({
schema: {
date: {type: 'Date'}
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('.bootstrap').append(form.el);
What type do I enter to use the included JQuery-UI datepicker? There is no documentation on this other than:
The old jQuery editors are still included but may be moved to another repository:
jqueryui.List
jqueryui.Date (uses the jQuery UI popup datepicker)
jqueryui.DateTime
The schema type is declared in quotes and I can't figure out what the string for jqueryui.Date would be - and that doesn't work for sure.
You want to create a custom editor that you'll name for example: 'DatePicker'.
All the editors are attached to Backbone.Form.editors. Because the DatePicker is rendered exactly like a text field, we can use the text field as a base and only override the behavior specific to the datepicker.
I often use moment.js for some date related work, so this example also includes this. Also it's based on Bootstrap DatePicker and not the jQuery one, but this would be almost 100% the same.
Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
render: function() {
// Call the parent's render method
Backbone.Form.editors.Text.prototype.render.call(this);
// Then make the editor's element a datepicker.
this.$el.datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 1
});
return this;
},
// The set value must correctl
setValue: function(value) {
this.$el.val(moment(value).format('YYYY-MM-DD'));
}
});
That's it, you can now use your date picker like this:
schema: {
birthday: { title: 'When were you born', type: 'DatePicker'}
}
Not sure it undestanding right your Question
but I think you can atach the Jquery date pickers in the initialize method of the view