-1
誰かがdatepickerをfullcalendar jqueryにリンクする方法を教えてもらえますか？私が試みているコードを以下で見つけてください。datepickerをfullcalendar jqueryにリンクする方法
リンクは、datepickerで日付または月を選択することを意味し、fullcalendarはその特定の月を取得してイベントを表示する必要があります。
私はリンクの下にこのことからしようとしています -
コンソールログにhttps://github.com/fullcalendar/fullcalendar/issues/554
私は簡単な例ベースを作成しただけ
Date formatter not defined
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"/> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.js"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style type="text/css">
/* the 'fix' for the datepicker when using jquery layout */
#ui-datepicker-div { z-index: 5; }
</style>
<script type='text/javascript'>
$(document).ready(function() {
InitializeCalendar();
var custom_buttons = '<td style="padding-left:10px">' +
'<div class="fc-button-next ui-state-default ui-corner-left ui-corner-right">' +
'<span>' +
'<input type="hidden" id="date_picker" value="" />' +
'<img src="<%=AppHelper.ImageUrl("calendarIcon.JPG")%>" id="datePickerImage" />' +
'</span>' +
'</div>' +
'</td>';
$('.fc-header-title').parent('td').after(custom_buttons);
$("#date_picker").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) {
var d = $("#date_picker").datepicker("getDate");
$('#calendar').fullCalendar('gotoDate', d);
}
});
$('#datePickerImage').mouseover(function() {
$('#date_picker').datepicker('show');
});
$('#datePickerImage').mouseout(function() {
$('#date_picker').datepicker('hide');
});
});
function InitializeCalendar()
{
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar
({
theme: true,
height: 650,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "/Home/GetCalendarEvents/",
draggable: false,
eventClick: function(calEvent, jsEvent) {
return false;
},
eventRender: function(calEvent, element) {
$.fn.qtip.styles.themeroller = {
background: null,
color: null,
tip: {
corner: true,
background: null
},
border: {
width: 0,
radius: 3
},
title: {
'background': null,
'fontWeight': null
},
classes: {
tooltip: 'ui-widget',
tip: 'ui-widget',
title: 'ui-widget-header',
content: 'ui-widget-content'
}
};
var eventDate = calEvent.start;
$(element).qtip({
content: {
url: '/Home/CalendarEventDetails?date=' +
$.fullCalendar.formatDate(eventDate, 'MM dd yyyy'),
method: 'get',
title: { text: $.fullCalendar.formatDate(eventDate, 'dddd,MMM yyyy') }
},
position: {
corner: {
target: 'bottomLeft',
tooltip: 'topLeft'
}
},
style: {
background: calEvent.color,
border:
{
color: calEvent.color
},
name: 'light',
tip: true,
width: 500
}
});
}
});
}
</script>
<div id='calendar'></div>
よろしく
リンクを働いていましたか？日付の日付ピッカーをリンクしますか？クリックすると？お願いします。 –
こんにちは..私は私が試みている上記のコードを持っています...そして私が達成しようとしているイメージ.. \ – learningmode