0
私はAngularJsのように細いフレームワークとフロントエンドとしてバックエンドを使ってイベントスケジューラーアプリケーションをやっています。ここでどのように値をslim apiからjavascript variable.Belowに割り当てるかは私のコードです。 カレンダーを使用して予定をスケジュールしています。AngularJsの値をjavascript変数に設定するには
<body ng-app="calenderApp" ng-controller="calenderCtrl">
<div class="col-md-9">
<div class="box box-primary">
<div class="box-body no-padding">
<div id="calendar"></div>
</div>
</div>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angularjs/calender.js"></script>
</body>
カレンダーにイベントを固定するために私のjavascriptは次のとおりです。
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
backgroundColor: "#3c8dbc", //Primary (light-blue)
borderColor: "#3c8dbc" //Primary (light-blue)
}
],
editable: false,
droppable: false, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
</script>
私AngularJsは、イベントを取得するためのファイル：
var app = angular.module('calenderApp', []);
app.controller('calenderCtrl', ['$scope', '$http' ,function($scope, $http)
{
getInfo();
function getInfo()
{
$http.post("http://localhost/AdminLTE-master/sis_crm/route/campaign/campaign/view").then(function(response) {
$scope.names = response.data.records;
});
}
}]);
ここで私はのような変数に値を設定する方法title、start、backgroundColor、borderColorを取得します。事前に感謝します。
感謝..！どのようにすることができますイベントと#calendarを使用しますか？ –
イベントは、私の例ではカレンダー設定で使用されているので、カレンダーで変更する必要がありますが、$（ "＃calendar"）を使用する必要があります。あなたが必要とするものでない場合は、記述してください。 –
あなたはイベント[]を言及します;私はそれを使用することができます.. –