Display Specific Arabic Language with primefaces (<p:Schedule>)

Viewed 124

Dears, Please i'm trying to make a specific arable language to be displayed with the tag <p:schedule> .. However, when i put locale="ar", its being dispalyed with the default arabe langue of primefaces.. Please note that i used the bewlow JavaScript and it works properly for he tag <p:calendar> but not with <p:schedule>.

<h:form>
<div align="center" >
    <p:growl id="messages" showDetail="true" />    
    <h:panelGrid columnClasses="value" id="table">
    <p:calendar locale="ar"></p:calendar>
        <p:schedule  id="schedule" value="#{workBean.eventModel}" widgetVar="myschedule" 
             rightHeaderTemplate=""
             leftHeaderTemplate="today, prev, next"
                showWeekNumbers="true" view="month"  resizable="false" clientTimeZone="local"  locale="ar" >
 
            <p:ajax event="dateSelect" listener="#{workBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
            <p:ajax event="eventSelect" listener="#{workBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
            <p:ajax event="eventMove" listener="#{workBean.onEventMove}" update="messages" />
            <p:ajax event="eventResize" listener="#{workBean.onEventResize}" update="messages" />
         </p:schedule>
    </h:panelGrid>
  </div>
   

</h:form> 
 <script type="text/javascript" >    
 PrimeFaces.locales ['ar'] = {
          closeText: 'إغلق',
          prevText: 'إلى الخلف', 
          nextText: 'إلى الأمام',
           currentText: 'بداية',
              monthNames: ['جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', 'جويلية', 'أوت', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر' ],
             monthNamesShort: ['جانفي', 'فيفري', 'مارس', 'أفريل', 'ماي', 'جوان', 'جويلية', 'أوت', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر' ],
              dayNames: ['يوم الأحد‎', 'يوم الإثنين‎', 'يوم الثلاثاء‎', '‏يوم الأَرْبعاء‎', '‏يوم الخَمِيس‎', 'يوم الجُمْعَة‎‎', 'يوم السَّبْت'], 
              dayNamesShort: ['الأحد‎', 'الإثنين‎', 'الثلاثاء‎', 'الأَرْبعاء‎', 'الخَمِيس‎', 'الجُمْعَة‎‎', 'السَّبْت'], 
              dayNamesMin: ['الأحد‎', 'الإثنين‎', 'الثلاثاء‎', 'الأَرْبعاء‎', 'الخَمِيس‎', 'الجُمْعَة‎‎', 'السَّبْت'],
               weekHeader: 'الأسبوع', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix:'' , 
               timeOnlyTitle: 'الوقت فقط' ,
                timeText: 'الوقت' ,
                 hourText: 'ساعة', 
                 minuteText: 'دقيقة', 
                 secondText: 'ثانية', 
                 ampm: false, 
                 month: 'الشهر',
                  week: 'الأسبوع', 
                  day: 'اليوم', 
                  allDayText: 'سا ئراليوم' };
</script>

Result link : https://ibb.co/VgPGZcQ

1 Answers

OK a couple of things...

  1. Like in this example on the showcase you might want to put your script ABOVE your component so it loaded before the component loads. https://www.primefaces.org/showcase/ui/data/schedule/localization.xhtml

See this screenshot in Arabic: Arabic Schedule

  1. Are you interested in helping PrimeFaces have better Arabic built in translations? We have two files that need to be translated and the Arabic ones are incomplete. You can see both the complete client side and serverside files we need Arabic for here: https://primefaces.github.io/primefaces/10_0_0/#/core/localization

Here is the current Arabic: https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/locales/locale-ar.js

But here is what the complete English file is so you can see the missing Arabic translations: https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/locales/locale-en.js

Let me know if you are interested in helping us update the Arabic translations!

Related