2017-02-06 25 views
0

私はfullcalendar.jsに誕生日を読み込もうとしています。私の浅い知識では、誕生日は毎年すべきであり、例えば言って、私は(私のデータベースの誕生日の欄には、このように、これらの誕生日を持っている注:私はC#asp.netのfullcalendar.jsプラグインで誕生日を読み込む方法

  • 2016年9月18日
  • 10 shortdate形式を使用していました/ 2016
  • 2016年10月28日
  • 2016年10月27日
  • 2016年11月2日
  • 2016年11月3日
  • 1992年5月4日
  • 0/2
  • 2017年1月13日

私のカレンダープラグインにこれ​​らの日付を引っ張る、私は/私は彼らの特定の年の例えば10に移動しない限り、他のものは表示されません、日付2017年1月13日誕生日の上映が表示されます28/2016は、2016年、28日、28日であり、もちろんこれらは毎年表示されます。私は今年の日付をそれぞれの月と日に見ることができるはずです。私のC#のコードは、これは私のカレンダーディレクティブユーザーは、前後の年

でカレンダーをナビゲートして、私は正確な月と日の誕生日のショーを行うことができますどのように

function FullCalendar($window, $filter) { 
return { 
    restrict: "EAC", 
    link: link 
}; 
function link(scope, element, attrs) { 
    /* Initialize the calendar */ 
    scope.$watch('waiting', function (newValue) { 
     if (!newValue) { 
      var date = new Date(); 
      var d = date.getDate(); 
      var m = date.getMonth(); 
      var y = date.getFullYear(); 
      var form = ''; 
      var today = new Date($.now()); 
      var defaultEvents = scope.dashboardData.calendarData.map(function (item) { 
       return { 
         title: item.count+(item.category == 1 ? " birthday(s)" : "Expired Subscriptions")), 
         start: item.date, 
         category: item.category, 
         className: item.category == 1 ? 'bg-primary' : 'bg-warning', 
         userProfileIds: item.userProfileIds 
        }; 

       }; 
      }); 
      $(element).fullCalendar({ 
       defaultDate: $.now(), 
       slotDuration: '00:15:00', 
       minTime: '08:00:00', 
       maxTime: '19:00:00', 
       defaultView: 'month', 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
       events: defaultEvents, 
       editable: true, 
       // droppable: true, // this allows things to be dropped onto the calendar !!! 
       selectable: true, 
       eventClick: function (calEvent, jsEvent, view) { 
        switch (calEvent.category) { 
          case 1: 
           scope.openBirthdayListModal(calEvent.userProfileIds); 
           break; 
          case 2: 
           scope.openSubscriptionModal(calEvent.userProfileIds); 
           break; 
          default: 
         } 
       } 
      }); 
     } 
    }); 
} 
} 

FullCalendar.$inject = ["$window", "$filter"]; 

angular.module("app").directive("fullCalendar", FullCalendar); 
var dashboardData; 

ある

public object GetCalendarData() 
{ 
    var currentDate = DateTime.Now.Date; 
    var birthDays = from e in _userProfileRepository.Table.ToList() 
     where e.Birthday != null 
     group e by e.Birthday 
      into g 
     select new 
     { 
      Date = g.Key.Value, 
      Count = g.Count(), 
      UserProfileIds = g.Select(x => x.Id).ToList(), 
      Category = 1 
     }; 

    var subscriptions = from e in _estateRepository.Table.ToList() 
     where e.SubscriptionExpiryDate <= currentDate 
     group e by e.SubscriptionExpiryDate.Date 
      into g 
     select new 
     { 
      Date = g.Key, 
      Count = g.Count(), 
      UserProfileIds = g.Select(x => x.UserProfileId).ToList(), 
      Category = 2 
     }; 

    return birthDays.Union(subscriptions).ToList().Select(x=>new 
    { 
     x.Date, 
     x.Count, 
     x.Category, 
     x.UserProfileIds 
    }); 
} 

を下回っています

答えて

0

誕生日を表示する年ごとに個別のイベントオブジェクトを提供する必要があります。 FullCalendarはあなたのデータが誕生日に関連していることを知らず、特定の日付のイベントとしてしか見ません。イベントデータ(必要に応じて)に特定の年を指定するため、その特定の年にのみが表示されます。あなたは、その利用パターンに応じて、ユーザーがカレンダーを適度に見て、その年の範囲で十分な誕生日のイベントデータを生成することを期待しているかもしれません。

FullCalendarでは、1つのイベントオブジェクトを指定して一定間隔でイベントを繰り返すように指定することができますが、残念ながら現時点では毎日または毎週の繰り返ししか生成できないため、動作しません誕生日などの年次イベントの場合

データベースに誕生日(生年月日とは異なる)が格納されている場合、誕生日は特定の年に関連付けられていないため、実際には年を格納する必要はありません。しかし、もしあなたがその人の生年月日を持っていれば、それを保存するほうがいいでしょう。将来、将来の誕生日と年齢を計算することができます。

私は定期的な誕生日の問題は次のように行くかもしれない解決するために考えることができる唯一の他の事:

1)(日と月のように表すすべての誕生日のリストが含まれているあなたのページにjavascriptの変数を注入します年なし)。

2)FullCalendarのViewRenderイベント - https://fullcalendar.io/docs/display/viewRender/を処理します。ビューまたは日付範囲が変更されるたびに、表示されている日付を誕生日のリストと照合して確認します。いずれかの誕生日が現在表示されている日/月の範囲に該当する場合(年にかかわらず)、renderEventメソッド(https://fullcalendar.io/docs/event_rendering/renderEvent/)を使用して、正しい日/月/年の組み合わせのカレンダーに新しいイベントを挿入します。 (あなたは、その年のその誕生日のイベントがまだ存在しないことを確認したいかもしれません。たとえば、カレンダーがレンダリングされてからそのビューに既にアクセスしている場合などです。これを行うには、JS誕生日オブジェクトイベントが既にレンダリングされている年の配列を保持することができます)。

+0

さて、私はこの仲間が大好きです。ありがとう。私はこれを試してみる –

+0

@IdowuMatthewDamilolaそれは素晴らしいです。答えがあなたを助けてくれたと思ったら、受け入れられた答えとしてupvoteおよび/またはマークすることを忘れないでください - ありがとうございます:-) – ADyson

関連する問題